How to create gradient object with Raphael

StackOverflow https://stackoverflow.com/questions/575747

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 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

Was it helpful?

Solution

UPDATE: Rewritten for the latest Raphael API:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Linear Gradient</title>
  <script src="http://raphaeljs.com/raphael.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
  <script type="text/javascript" charset="utf-8">
    var paper = Raphael(10, 10, 800, 600);
    var circle = paper.circle(150, 150, 150);
    circle.attr({
      "fill": "90-#f00:5-#00f:95",
      "fill-opacity": 0.5
    });
  </script>
</body>
</html>

The documentation for the new attr() API is found here.

OTHER TIPS

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"}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top