Javascript 如何访问id'；外部加载的svg文件的数量？

我发现，如果我在html中嵌入svg，那么我就可以访问id：

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

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

更新：

我试过了

var doc=$（'#piano'）[0].contentDocument； 文件getElementById（'#myCircle）

但是我得到了，（我正在使用Chrome）

---

SecurityError:未能从“HTMLObjectElement”读取“contentDocument”属性：阻止原点为“null”的帧访问跨原点帧。

不幸的是，与

iframe

元素不同，当您从另一个文件引用SVG时，它不是作为您可以操作的

文档加载的。
如果您希望对svg进行DOM访问，最好的方法是为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();
    }
}

这基本上具有访问contentDocument的安全限制，如上所述。这对我没有多大帮助，因为我没有在服务器上使用它。我想我不明白。XMLHttpRequest可以加载与对象的data=“myfile.svg”文件请求相同的文件。
$('#myCircle').css('fill','red'); // doesn't work anymore

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();
    }
}