Search code examples
internet-explorer-8transparencyraphaelvml

raphael.js IE8 transparent stroke

I created a sunny sky with two objects following a random transparent path with raphaël.js:

http://jsfiddle.net/vcX4U/1/

This works fine in all proper browsers: Good Sky

Only IE8 - which I have to support due to the WinXP-users - shows a black path and flipped gradients on the upper sun rays (which is not critical):

Bad Sky

I am pretty sure this has to do with raphaël.js using VML for IE6-8, and SVG for all other browsers. But that may be an explanation not a solution...

Ideas?

edit @amadan: Thanx for your effort. But this makes the planes "crash":

enter image description here

Solution

  • It's only a partial solution for now, but 

    var c = paper.path(route).attr({stroke:"transparent","opacity":"0.01"});

    fixes your stroke issue. I'll have a look at the ray issue later.