How to create gradient object with Raphael

Question

Hi, I was trying to use Raphale JS graphics library. I would like to use the attribute gradient which should accept an object. Documentation says to refer to SVG specs. I found the gradient object in SVG, for instance

<linearGradient id="myFillGrad" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="5%" stop-color="red" />
<stop offset="95%" stop-color="blue" stop-opacity="0.5" />
</linearGradient>

but how can I reference that from within my javascript?

circle.attr("gradient", "myFillGrad");

doesn't work :) Thanks in advance

Answer 1

I don't believe the current raphael API allows you to set the individual stop opacities other than the last one, which is given the value passed in to the "opacity" attr, for example:

this.ellipse(x, y, r, r).attr({stroke: "none", fill: "r(.5,.1)#ccc-#ccc", opacity: 0})

...will have an stop-opacity of 0 on its last stop. For finer-grained control I added this "case" to the attribute parsing switch in my raphael.js:

 case "opacityStops":
                            if (attrs.gradient) {
                                var gradient = doc.getElementById(node.getAttribute(fillString)[rp](/^url\(#|\)$/g, E));
                                if (gradient) {
                                    var stops = gradient.getElementsByTagName("stop");
                                    var opacs=value.split("-");
                                    for(var ii=0;ii<stops.length;ii++){
                                        stops[ii][setAttribute]("stop-opacity", opacs[ii]||"1");
                                    }
                                }
                                break;
                            }

You must also add a corresponding entry in the "availableAttrs" object, for example:

availableAttrs = {<other attrs here>..., opacityStops:"1"}

A call to create a circle with a radial gradient with different opacity stops would then look like:

this.ellipse(x, y, r, r).attr({stroke: "none", fill: "r(.5,.5)#fff-#fff:70-#000", "opacityStops": "1-0-0.6"}