CODEWITHSUNDEEP
javascriptiframesvg
James
James

Reputation: 111900

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):

enter image description here

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?

Upvotes: 3

Views: 1017

Answers (1)

David Aurelio
David Aurelio

Reputation: 504

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.

Upvotes: 5

Related Questions