如何用 Raphael 创建渐变对象答案

【问题标题】：How to create gradient object with Raphael如何用 Raphael 创建渐变对象
【发布时间】：2010-10-09 05:05:18
【问题描述】：

我尝试使用 Raphael JS 图形库。我想使用应该接受对象的属性渐变。文档说要参考 SVG 规范。例如，我在 SVG 中找到了渐变对象

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

但是如何在我的 javascript 中引用它？

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

不起作用:) 提前致谢

【问题讨论】：

标签： javascript object svg raphael gradient

【解决方案1】：

更新：为最新的 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>

新的attr() API 的文档位于here。

【讨论】：

这个 API 好像不存在了。有关测试用例，请参阅 jsfiddle.net/GuQA6。您不会碰巧知道用于更改色标不透明度的新 API，是吗？
我更新了代码示例以反映最新的 API。未来最好的选择是阅读文档以了解 API 的变化情况。
我更新了 jsfiddle 以匹配 @NathandeVries 代码示例...jsfiddle.net/GuQA6/155 只是为了下一个想要看到它的开发人员。

【解决方案2】：

我不相信当前的 raphael API 允许您设置除最后一个之外的单个停止不透明度，这是给定传递给“不透明度”属性的值，例如：

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

...在其最后一站的停止不透明度为 0。为了更细粒度的控制，我在 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;
                            }

您还必须在“availableAttrs”对象中添加相应的条目，例如：

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

创建具有不同不透明度停止的径向渐变圆的调用将如下所示：

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

【讨论】：