Question

I want to put some background image to my paper.path I’ve created with raphael

paper.path(arc([xCenter, yCenter], radius, startAngle, endAngle)).attr({
                'stroke': "#ccc",
                'stroke-width': rinc - 1
            });

The result:
http://jsfiddle.net/n4Rvr/

I just want to put some image instead the #ccc color. Is it possible? However, I didn’t find something interesting on internet.

Answer 1

You want to fill the stroke of the path? There’s no support for using patterns on the stroke in Raphaël, so it’s not as easy as it is in pure svg, where you can either stroke with a pattern or mask an image with the given path to get the effect you’re after.

To get something similar in Raphaël you’ll need to build the stroked path as a new path, basically tracing around the inner and outer arcs so that you can fill it. Then use ‘fill’ instead of ‘stroke’ and pass in the url of the image you want.