How to create gradient object with Raphael

Question

I was trying to use Raphael 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

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

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

availableAttrs = {..., 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"}