动态添加到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效果很好。