Raphael.js path/line with gradient?

Question

is it possible to stroke a path in raphael with a gradient?

http://jsfiddle.net/L92Ch/ is a example.

I want this line to have a gradient from one color to another. In the SVG and Raphael documentation i cant find anything about that.

jsplumb.org/jquery/anchorDemo.html this is a example from jsplumb. The lines have a gradient. jslumb use the canvas tag. (sorry as a new user i am only allowed to post one link)

My other idea is to use a rect with a small height to imitate the line, but i have Bezier lines too.

Best Regards

Freakezoid

Answer 1

Out of the box, Raphael can't do it, you'd need a plugin. Here's the jsfiddle for the simple one that I created: http://jsfiddle.net/tcouc/qncEC/

The defineLinearGradient function simply adds the svg linear gradients to the defs section, and the strokeLinearGradient function adds the stroke attribute to reference the id of the linearGradient that you create.

I did it this way so that you can reference the gradient in more than one shape.

Note that you cant just set the stroke using the attr function of the raphael element - it wont work - internally the attr function attempts to convert the value set in the stroke argument to an rgb value expression and fails, hence my strokeLinearGradient function.

Hope that helps