How to create gradient object with Raphael

前端未结

关注

 2  1615

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

相关标签:

2条回答

滥情空心

2020-12-30 05:37

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

0 讨论(0)

清酒与你

2020-12-30 05:45

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.

0 讨论(0)