如何访问外部加载的 svg 文件的 id？ [复制]

Question

我发现如果我将 svg 嵌入到我的 html 中，那么我可以简单地访问 id：

<svg width="100" height="100">
  <circle id='myCircle' cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Javascript：

$('#myCircle').css('fill','red'); // 工作正常

但是如果我在外部加载这个 svg 文件：

<object id='myfile' data="myfile.svg" type="image/svg+xml">
</object>

（并假设此 svg 包含与上述相同的 id/content） 我做不到：

$('#myCircle').css('fill','red'); // doesn't work anymore

所以我想知道如何访问外部加载的 .svg 文件的 ID？

更新：

我试过了

var doc = $('#piano')[0].contentDocument; doc.getElementById('#myCircle);

但我明白了，（我正在使用 Chrome）

SecurityError: 无法从 'HTMLObjectElement' 读取 'contentDocument' 属性：阻止具有源“null”的框架访问跨域框架。

Answer 1

不幸的是，与 iframe 元素不同，当您从另一个文件引用您的 SVG 时，它不会加载为您可以操作的 document。

Answer 2

如果您希望 DOM 访问您的 svg，最好的方法是为您的 HTML5 文档内联加载 svg 文件，即创建一个 DIV id="svgDiv"，并使用 svgDiv.innerHTML 接受XMLHttpRequest.responseText

下面是一个例子：

function loadSVGInline()
{
    var SVGFile="mySVG.svg"
    var loadXML = new XMLHttpRequest;
    function handler(){
        if(loadXML.readyState == 4 && loadXML.status == 200)
        {
            svgDiv.innerHTML=loadXML.responseText
        }
    }
    if (loadXML != null){
        loadXML.open("GET", SVGFile, true);
        loadXML.onreadystatechange = handler;
        loadXML.send();
    }
}