Raphael.js path/line with gradient?

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 imi开发者_Go百科tate the line, but i have Bezier lines too.

Best Regards

Freakezoid

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

SVG supports gradients.

I recently released version 1.3.1 of jsPlumb, in which SVG is supported. The demo you cited has SVG gradients in it:

http://jsplumb.org/jquery/anchorDemo.html#

(you need to click the 'SVG' link to kick it into SVG render mode)

The SVG spec has a fair bit to say about gradients:

http://www.w3.org/TR/SVG/pservers.html