How to create gradient object with Raphael

2020-02-25 06:56发布

站内问答 / JavaScript
978 2 2

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

2条回答
我欲成王，谁敢阻挡
2楼-- · 2020-02-25 07:41

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) 举报
We Are One
3楼-- · 2020-02-25 08:00

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) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)