从 Javascript 访问 SVG 对象时收到 Uncaught SecurityError答案

【问题标题】：Receive Uncaught SecurityError when accessing SVG objects from Javascript从 Javascript 访问 SVG 对象时收到 Uncaught SecurityError
【发布时间】：2014-08-29 22:42:39
【问题描述】：

今天我花了一些时间尝试使用 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”上执行“发送”：无法加载 'file:///home/user/Documents/examples/d3/check.svg'

如果您想查看我的d3.xml() 尝试的更多详细信息，我很高兴更新这个问题，我只是认为已经有很多代码块。

【问题讨论】：

您需要从本地服务器运行它。本地文件系统运行的文件不允许使用 XMLHttpRequest。
或者在 Chrome 以外的其他设备上尝试。
是的，Alexander，你是对的，非常感谢。这解决了这两个问题。如果您作为答案发布，我会接受。
我在使用 vivus.js 脚本时遇到了类似的情况，我正在服务器上运行，并且我已经正确设置了文档域。

标签： javascript jquery html svg d3.js

【解决方案1】：

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

要解决这个问题，您可以通过本地服务器打开它。或者，您可以disable the Same-Origin Policy web security feature 使用--disable-web-security 命令行参数进行测试。 Firefox 也没有这个限制，所以也有这个选项。

【讨论】：