如何访问外部加载的svg文件的id？

Question

我发现如果我在我的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>

使用Javascript：

  。

$（ '＃myCircle'）的CSS（ '填充'， '红'）; //工作正常

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

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

（并假设此svg包含与上述相同的id /内容） 我不能这样做：

$('#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

如果您想要对您的svg进行DOM访问，最好的方法是为您的HTML5文档内联加载svg文件，创建一个DIV id =＆＃34; svgDiv＆＃34;，并使用svgDiv.innerHTML接受{ {1}}

以下是一个例子：

XMLHttpRequest.responseText