动态加载的SVG不允许访问其DOM

Question

在CSS-Tricks guide on SVG sprites之后，我完成了一个SVG sprites file，其中有多个symbol元素，其中有animate个元素，当beginElement()函数为在他们身上跑。

当我在HTML中插入svg时，此方法效果很好，但我想添加此SVG。我遵循了CSS-Trick Guide on Ajaxing this SVG Sprites，并且正在动态加载此SVG，但是加载后，我无法访问SVG的DOM来运行beginElement()函数。

问题是已加载的SVG中contentDocument属性为null。我发现DOM有一个ownerDocument属性，但它看起来像是只读的。当我尝试运行beginElement()时，没有任何反应。

您可以在这个小提琴中看到问题所在：

https://jsfiddle.net/kumiau/2hx5gnc6/2/

我在其他SO线程（1）中发现了此问题，但是它们归结为两个主要问题：

• file://协议，但是我正在服务器上运行它。
• 外部域文件，但是我正在从同一域中加载SVG。
• 未加载SVG，但是在下载SVG之后我正在运行代码。