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

Question

遵循关于 SVG sprites 的 CSS-Tricks 指南，我完成了一个SVG sprites 文件，其中包含几个symbol元素，其中的元素可以在函数运行animate时触发动画。beginElement()

当我在我的 HTML 中插入 svg 时，这很有效，但我想缓存这个 SVG。我已经按照CSS-Trick Guide on Ajaxing this SVG Sprites 进行了动态加载，但是加载后我无法访问 SVG 的 DOM 来运行该beginElement()函数。

问题是contentDocument加载的 SVG 中的属性为空。我发现ownerDocumentDOM 有一个属性，但看起来它是只读的。当我尝试运行时，beginElement()什么也没有发生。

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

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

我在其他 SO 线程 ( 1 ) 中发现了这个问题，但它们归结为两个主要问题：

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

标签： javascriptajaxsvg