DmitryBaranovskiy / raphael

JavaScript Vector Library
https://dmitrybaranovskiy.github.io/raphael/
MIT License
11.27k stars 1.67k forks source link

Raphael.setWindow + drawing in iframe breaks gradient fill #1096

Open Jouzer opened 6 years ago

Jouzer commented 6 years ago

Hello, I wanted to report something I found, hope it's not a fail at my end.

I load the Raphael in a parent window and use it in same-origin iframe because I'm trying to optimize for a low-performance device I have and I want to load the library just once even if I "switch pages" (the src of the iframe)

It's working quite well, but a problem I came across is that the linear gradients don't work anymore. I think it's because in the generated SVG code the fill reference points to the parent window, in my case main.html, maybe it should point to the iframe html..?

Clip from dev tools view

<rect x="0" y="0" width="98.5" height="205.5" rx="0" ry="0" fill="url('file:///C:/Users/mk/generator/main.html#lyis490-rgba_255_255_2550.8-rgba_255_0_00.8')" stroke="#000" style="opacity: 1; fill-opacity: 1;" opacity="1" fill-opacity="1" transform="matrix(1,0,0,1,188.317,587.622)">

I use it like this parent.Raphael.setWindow(window); var paper = parent.Raphael(0,0,1700.734,1017.337);

if I reverse the order of thse two lines, the paper won't be in the iframe (but it works then) I also tried paper.setWindow(window); but it just errors.

Thanks for all the great work you've done!

Jouzer commented 6 years ago

I just wanted to drop by and add that I did test to change the fill attribute from the main.html to the iframe.html in the browser and it worked, so it seems to be a problem in referencing to the right html indeed. I'll try to fix it with my noob powers some day when it's relevant if no-one else is interested in checking it out.