RaphaelJS与rgba渐变填充

Question

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

这个小提琴就是我希望如何实现这一点,但正如你所看到的,底部的黑色是完全不透明的.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目前的支持允许您使用不透明度属性和填充不透明度设置最终颜色停止的透明度,例如:

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

将在现实世界中转换为在中心的第一个颜色停止(黑色)和最终停止(蓝色)的0%不透明度中具有100%不透明度的圆.另一个例子 :

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源代码....