javascript - iframeに動的に追加されたSVGが正しくレンダリングされない

Question

具体的には、IRI参照（例fill="url(#myLinearGradient)"）が機能していないようです。

ここでの例：http：//jsfiddle.net/QYxeu/2/

スクリーンショット（右側のiframe）：

線形グラデーションは右側にレンダリングされていません。

Chrome、Firefoxでこの問題が発生していますが、奇妙なことにSafariは問題ありません。

誰かが問題が何である可能性があり、それを解決する方法を知っていますか？

Answer 1

この問題は、iframeドキュメントを一度開いたり閉じたりすることで解決できます。一部のブラウザでは、URLフラグメントの解決に使用する前に、iframeのコンテンツドキュメントを初期化する必要があるようです。

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.contentDocument.open();
iframe.contentDocument.close();

例の修正バージョンはうまく機能します。