SVG dynamically added to iframe does not render correctly

问题

Specifically, the IRI references (e.g. fill="url(#myLinearGradient)") do not seem to work.

Example here: http://jsfiddle.net/QYxeu/2/

Screenshot (iframe on the right):

The linear gradient is not rendered on the right.

I'm getting this issue in Chrome, Firefox, but strangely Safari is okay.

Does anyone know what the issue could be and how to solve it?

回答1:

This issue can be solved by opening and closing the iframe document once. It seems that some browsers need to initialize the content document of an iframe before it can be used to resolve url fragments.

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

The modified version of your example works well.

来源：https://stackoverflow.com/questions/10177190/svg-dynamically-added-to-iframe-does-not-render-correctly