Path / line Raphael.js with gradient?

Question

Is it possible to stroke the path in a graphal with a gradient?

http://jsfiddle.net/L92Ch/ - example.

I want this line to have a gradient from one color to another. In the SVG and Raphael documentation, I can not find anything about this.

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

My other idea is to use a small-height rectangle to simulate a line, but I also have Bezier lines.

Best wishes

Freakezoid

Answer 1

Out of the box, Raphael cannot do this, you need a plugin. Here's the jsfiddle for the simple one I created: http://jsfiddle.net/tcouc/qncEC/

The defineLinearGradient function simply adds svg linear gradients to the defs section, and the strokeLinearGradient function adds the stroke attribute to refer to the identifier of the linear gradient you create.

I made it so that you can reference the gradient in more than one form.

Note that you cannot just set the stroke using the attr function of the raphael element - it will not work - internally, the attr function tries to convert the value specified in the stroke argument to an expression in the rgb expression and fails, so my strokeLinearGradient function

Hope that helps

Answer 2

SVG supports gradients.

I recently released version 1.3.1 jsPlumb, which supports SVG. There are SVG gradients in your demo version:

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

(you need to click the "SVG" link to run it in SVG rendering mode)

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

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