How can I draw a "transparent stroke" with Raphael.js

Question

I am attempting to draw the path of a graph so that the path is transparent and the rest of the canvas is not. This way I can use the canvas as a mask and fill the path with different colors using html elements. Kind of like this:

Maybe this will work? http://stackoverflow.com/questions/6042550/svg-fill-color-transparency-alpha — The Muffin Man, Apr 12 '13 at 20:51
I'm not a Raphaeljs expert but you can check `stroke-opacity` on [documentation page](http://raphaeljs.com/reference.html#Element.attr). — fernandosavio, Apr 12 '13 at 20:53
Yeah, the problem is filling the rest of the paper (minus the path) with a solid color. — Michael, Apr 12 '13 at 20:55

score 1 · Answer 1 · answered Apr 16 '13 at 17:29

There's no way to achieve this natively through Raphael, but it could be accomplished by some selective modification of the SVG produced by Raphael. Consider the use of a mask applied to the path. This technique is used to absolutely delicious visual effect here.

Don't forget that you can access the DOM node associated with a Raphael paper object through that paper object's canvas property (I don't know why Baranovskiy chose such a misleading name!). You could use this to interact directly with the SVG in the DOM, though I can't vouch for interactions between Raphael and custom modifications =)

Thanks for the suggestion, Kevin! I'm not doing too much heavy lifting with Raphael anyway, so I can probably stick to SVG. Not supporting IE in this application anyway ;) — Michael, May 06 '13 at 21:08

score 0 · Answer 2 · edited May 23 '17 at 12:28

To fill only the outer part of a path, you will have to draw what is often called a "donut" made of two path strings.

You will find a good example here : How to achieve 'donut holes' with paths in Raphael .

The idea is: * give the outer path string as a large counter clockwise closed rectangle, telling the browser that what has to be filled is what is inside * concat the inner path string as the clockwise closed path you want, telling the browser what has to be filled is what is outside.

Thus resulting in a filled shape with a hole which is the intersection of both filled shapes.

How can I draw a "transparent stroke" with Raphael.js

2 Answers2