javascript - 动态添加到 iframe 的 SVG 无法正确呈现

Question

具体来说，IRI 引用(例如 fill="url(#myLinearGradient)")似乎不起作用。

此处示例:http://jsfiddle.net/QYxeu/2/

截图(右侧iframe):

右边没有渲染线性渐变

我在 Chrome、Firefox 中遇到了这个问题，但奇怪的是 Safari 没问题。

有谁知道问题可能是什么以及如何解决？

Answer 1

这个问题可以通过一次打开和关闭 iframe 文档来解决。似乎有些浏览器需要先初始化 iframe 的内容文档，然后才能使用它来解析 url 片段。

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.contentDocument.open();
iframe.contentDocument.close();

modified version of your example效果很好。