今天,我花了一些时间尝试使用D3(和jQuery)操作SVG。* 我的目标 * 是能够通过JavaScript访问/修改本地SVG。如果它是为D3量身定制的也没关系,但那将是额外的加分。
似乎对其他人有效的解决方案对我不起作用,它有以下JavaScript:
window.onload=function() {
// Get the Object by ID
var a = document.getElementById("svgObject");
// Get the SVG document inside the Object tag
var svgDoc = a.contentDocument;
// Get one of the SVG items by ID;
var svgItem = svgDoc.getElementById("svgItem");
// Set the colour to something else
svgItem.setAttribute("fill", "lime");
};
字符串
HTML object
<object id="svgObject" data="img/svgfile.svg" type="image/svg+xml" height="50" width="50"></object>
型
和单独的SVG文件
<svg height="40px" width="40px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
<rect id="svgItem" width="800" height="800" fill="red"></rect>
<circle cx="400" cy="400" r="400" fill="blue"></circle>
</svg>
型
全部找到here。它是this example中代码的简化版本。我的JavaScript代码如下所示,直接来自我的编辑器:
window.onload = function() {
var checkObject = document.getElementById("checkers");
var checkDoc = checkObject.contentDocument;
var cheese = checkDoc.getElementById('layer1');
console.log(cheese);
};
型
如果它改变了任何东西,我的脚本被加载在HTML体的底部。下面是我唯一的HTML元素。
<object data="check.svg" type="image/svg+xml" width="100" id="checkers"></object>
型
和我的SVG文件(只是一个灰色检查,随意使用)。
<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<g id="layer1" transform="translate(0,-952.36217)">
<path id="rawCheck" fill="#dbdbdb" d="m18.75,1004.5,21.607,21.607,40.893-40.893-7.8571-7.8572-33.036,33.036-13.75-14.107z" stroke-opacity="0"/>
</g>
</svg>
型
我的问题来自于在checkObject
上调用.contentDocument
,这 * 应该 * 只是在object
元素上调用.contentDocument
,但我得到了这个混乱:
未捕获的安全错误:无法从“HTMLObjectElement”读取“contentDocument”属性:阻止原点为“null”的帧访问原点为“null”的帧。协议、域和端口必须匹配。
只不过都是愤怒的红色。这让我很困惑,因为据我所知,我的代码非常接近于工作示例的副本,但我还是在这里。
我还尝试了this question的答案中的d3.xml()
,并收到以下错误。
XMLHttpRequest无法加载文件:/home/user/Documents/examples/d3/check.svg。跨源请求仅支持HTTP。
以及
未捕获的网络错误:无法在“XMLHttpRequest”上执行“send”:无法加载“file:/home/user/Documents/examples/d3/check.svg”
如果您想了解更多关于我的d3.xml()
尝试的细节,我很乐意更新这个问题,我只是认为已经有很多代码块了。
1条答案
按热度按时间oknwwptz1#
在Chrome中,当页面通过文件系统打开时,不可能通过JavaScript访问外部SVG的内容(即URL具有
file://
协议)。要解决这个问题,您可以通过本地服务器打开它。或者,您可以使用
--disable-web-security
命令行参数disable the Same-Origin Policy web security feature进行测试。Firefox和其他一些浏览器在某个时候可能没有这个限制,但现在似乎不再是这样了。为了安全起见,现代浏览器通常限制对本地文件数据编程访问。