javascript - 带有 rgba 渐变填充的 RaphaelJS

Question

我正在尝试使用 RaphaelJS 创建一个使用 rgba 颜色的渐变填充。换句话说，我希望起点和终点都具有一定程度的透明度。例如，20% 黑色到 0% 黑色。这是怎么做到的？

这个 fiddle 是我期望的实现方式，但如您所见，底部的黑色完全不透明。 http://jsfiddle.net/4aPj2/

r.circle(50,50,50).attr({fill:'90-rgba(0,0,0,0)-rgba(0,0,0,0.2)',opacity:0})

Answer 1

好的，

以前的答案对于任何看这个问题的人来说都是一个转移注意力的问题。我只是花了半天时间来研究 raphaeljs 源代码。不是这么简单。所以 Raphaeljs 实际上已经有一些内置支持，你尝试像上面那样修改的任何东西都不会起作用，因为内置支持稍后会覆盖它。Raphaeljs 目前的支持允许您使用 opacity 属性和 fill-opacity 设置最终色标的透明度，例如:

r.circle(50,50,50).attr({fill:'90-#000000-#0000ff',opacity:0})

将在现实世界中转换为一个圆圈，在中心的第一个色标(黑色)中具有 100% 的不透明度，在最后一个色标(蓝色)中具有 0% 的不透明度。另一个例子:

r.circle(50,50,50).attr({fill:'90-#000000-#ffffff',opacity:0.5})

将产生一个真实世界的圆圈，中心为 100% 不透明度黑色，在最后一站的圆圈外围为 50% 白色不透明度。

Raphaeljs 目前没有办法在两个色标上支持不同的不透明度，但如果你迫切需要这样做，你需要修改的源代码行就在这里:

$(stops[stops.length - 1], {"stop-opacity": value});

它在当前版本的 Raphaeljs (2.1.0) 中位于 6265。我希望这可以帮助某人避免我刚刚花费的调试 RaphealJS 源代码的时间....