Geek asks and answers

SVG dynamically added to iframe, not displaying correctly

In particular, IRI links (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

A linear gradient is not displayed on the right.

I get this problem in Chrome, Firefox, but, oddly enough, Safari is fine.

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

+3
source share
1 answer

This problem can be solved by opening and closing the iframe document once. It seems that some browsers need to initialize an iframe content document before it can be used to eliminate URL fragments.

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

.

+5

More articles:


All Articles