SVG动态添加iframe中不能正确渲染(SVG dynamically added to ifra

具体来说，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();

在你的例子的修改版本效果很好。

文章来源: SVG dynamically added to iframe does not render correctly