从 Javascript 访问 SVG 对象时收到未捕获的安全错误 [英] Receive Uncaught SecurityError when accessing SVG objects from Javascript
问题描述
今天我花了一些时间尝试使用 D3(和 jQuery)操作 SVG.我的目标是能够通过 JavaScript 访问/修改本地 SVG.如果它是为 D3 量身定制的并不重要，但那会是额外的积分.
Today I've been spending a bit of time trying to manipulate SVGs with D3 (and jQuery). My goal is being able to access/modify local SVGs through JavaScript. Doesn't matter if it's tailored to D3 but that would be extra points.
似乎适用于其他人的解决方案不适用于我，其中包含以下 JavaScript:
It seems the solution that works for other people isn't working for me, which has the following 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 代码如下所示，直接来自我的编辑器:
all found here. It's a simplified version of the code found in this example. My JavaScript code is shown below, straight up out of my editor:
window.onload = function() {
var checkObject = document.getElementById("checkers");
var checkDoc = checkObject.contentDocument;
var cheese = checkDoc.getElementById('layer1');
console.log(cheese);
};
如果它有任何改变，我的脚本会加载到 HTML 正文的底部.下面是我唯一的 HTML 元素.
In case it changes anything, my script is loaded at the bottom of the HTML's body. Below is my only HTML element.
<object data="check.svg" type="image/svg+xml" width="100" id="checkers"></object>
和我的 SVG 文件(只是一个灰色的检查，随意使用).
and my SVG file (just a gray check, feel free to use).
<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 元素，但我搞砸了:
My issue comes from calling .contentDocument on checkObject, which should just be calling .contentDocument on the object element but I get this mess:
未捕获的安全错误:无法从 'HTMLObjectElement' 读取 'contentDocument' 属性:阻止了来源为null"的框架来自访问原点为null"的框架.协议、域和端口必须匹配.
Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLObjectElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
除了它都是愤怒的红色.这让我很困惑，因为据我所知，我的代码非常接近工作示例的副本，但我在这里.
Except it was all angry red color. This confused me, because as far as I can see, my code is pretty close to a copy of the working example, yet here I am.
我也尝试了 这个问题的回答并收到以下错误
I have also tried the d3.xml() seen in this question's answer and received the following error
XMLHttpRequest 无法加载file:///home/user/Documents/examples/d3/check.svg.交叉原点请求仅支持 HTTP.
XMLHttpRequest cannot load file:///home/user/Documents/examples/d3/check.svg. Cross origin requests are only supported for HTTP.
以及
未捕获的网络错误:无法在XMLHttpRequest"上执行发送":无法加载file:///home/user/Documents/examples/d3/check.svg"
Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///home/user/Documents/examples/d3/check.svg'
如果您想查看有关我的 d3.xml() 尝试的更多详细信息，我很高兴更新此问题，我只是认为已经有很多代码块了.
If you'd like to see more details on my d3.xml() attempt I'm happy to update this question, I just thought there were a lot of code blocks already.
推荐答案
在 Chrome 中，通过文件系统打开页面时，无法通过 JavaScript 访问外部 SVG 的内容(即 URL 具有 file:// 协议).
In Chrome, it is not possible to access an external SVG's contents via JavaScript when the page is opened through the file system (i.e. the URL has the file:// protocol).
要解决此问题，您可以通过本地服务器打开它.或者，您可以禁用同源策略网络安全功能以使用--disable-web-security 命令行参数.Firefox 也没有这个限制，所以也有这个选项.
To get around this, you can open it through a local server. Alternately, you can disable the Same-Origin Policy web security feature for testing using --disable-web-security command line argument. Firefox also does not have this limitation, so there is that option as well.
这篇关于从 Javascript 访问 SVG 对象时收到未捕获的安全错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
