从Javascript访问SVG对象时收到未捕获的SecurityError

Question

今天我花了一些时间试图用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>

都在这里找到.它是此示例中的代码的简化版本.我的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>

我的问题是来自调用.contentDocument上checkObject,这应该仅仅是调用.contentDocument了上object元素,但我得到这个烂摊子:

未捕获的SecurityError:无法从'HTMLObjectElement'读取'contentDocument'属性:阻止具有原点"null"的帧访问具有原点"null"的帧.协议,域和端口必须匹配.

除了它都是愤怒的红色.这让我很困惑,因为据我所知,我的代码非常接近工作示例的副本,但我在这里.

我也尝试d3.xml()过在这个问题的答案中看到并收到以下错误

XMLHttpRequest无法加载file:///home/user/Documents/examples/d3/check.svg.仅支持HTTP的跨源请求.

以及

Uncaught NetworkError:无法在'XMLHttpRequest'上执行'send':无法加载'file:///home/user/Documents/examples/d3/check.svg'

如果您想查看有关我d3.xml()尝试的更多详细信息,我很乐意更新此问题,我只是认为已经有很多代码块.

Answer 1

在Chrome 中，当通过文件系统打开页面时（即URL 具有协议），无法通过JavaScript 访问外部SVG 的内容file://。

为了解决这个问题，您可以通过本地服务器打开它。或者，您可以禁用同源策略 Web 安全功能--disable-web-security以使用命令行参数进行测试。

Firefox 和可能其他一些浏览器曾经没有这种限制，但现在似乎不再是这种情况了。为了安全起见，现代浏览器通常限制对本地文件数据的编程访问。