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();

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