动态添加到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();

您的示例的修改版本运行良好.