search

CreateJS / EaselJS

The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.
http://createjs.com/
MIT License
8.11k stars 1.97k forks source link

SVG cannot be rendered on IE 11 #989

Open damy90 opened 5 years ago

damy90 commented 5 years ago

Issue Details

lannymcnie commented 5 years ago

Is this an EaselJS issue, or a problem with IE11 and drawImage with SVGs?

I made this sample that just draws the SVG directly into the canvas without EaselJS, and it looks like it doesn't work. https://liveweave.com/xfYKzr

I am going to close this. Feel free to reopen if the issue is shown to be EaselJS-specific. Cheers!

damy90 commented 5 years ago

The sample using canvas directly works on IE on my machine. The createjs still doesn't. My IE is now version 11.407.17134.0

lannymcnie commented 5 years ago

Thanks, I can do some more testing.

lannymcnie commented 5 years ago

I think I solved this. It is an issue with EaselJS, but I am not sure what we can do.

To summarize

This is why they will work with raw canvas, but not in EaselJS. We can determine when an image is loaded, but since EaselJS thinks it has no content, it will not try to draw it.

We will look at adding a workaround. Maybe just checking that the source is an SVG path is enough. You can probably patch EaselJS yourself fairly easily. Just check out the isVisible function in Bitmap.js (or modify the function in the compiled lib).

Note that when using raw canvas, even if the image is "loaded" it might still not render right away, which is why it appeared that the raw canvas approach didn't work in IE. If you set it to delay a little, or constantly redraw, the SVG showed up consistently. Typical race condition. https://jsfiddle.net/lannymcnie/481entqb/2/

Definitely an interesting edge case.