从Javascript访问SVG无法正常工作。

Question

我一直在按照使用JavaScript访问SVG元素的示例进行尝试，但是我无法使其正常工作。这段代码有什么问题？

Javascript：

var objTag = document.getElementById('esc-seconds-1s');
objTag.addEventListener('load', function() {
    var svgDoc = objTag.contentDocument;
    var cc3 = svgDoc.getElementById('cc3');
    cc3.setAttribute('fill', 'red');
}, false);

我遇到了以下控制台错误：

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.

我认为错误有点误导。错误来自contentDocument行，所以我不认为是由于同源策略。此外，我的SVG文件中没有任何xlink行。这是我的SVG顶部：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

SVG显示正常，那么为什么objTag.contentDocument调用失败？

html代码：

<object class="esc-seven-segment" id="esc-seconds-1s"
     type="image/svg+xml" data="images/seven-segment-digit.svg"></object>

感谢您，
-Andres

- Andres Gonzalez

---

请参见：在JavaScript中访问SVG对象时收到未捕获的SecurityError。 - Alexander O'Mara

Answer 1

你是否在使用Chrome浏览器并从本地文件（即file://）中工作？

在Chrome中使用本地文件的iframe

如果是，请运行本地Web服务器（http://localhost/），或尝试使用其他浏览器进行测试。

- Paul LeBeau

---

太棒了，就是这样。谢谢保罗的回复 - 那解决了错误。 - Andres Gonzalez