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