在拉斐尔中使用不透明度进行渐变颜色填充答案

【问题标题】：gradient color fill with opacity in raphael在拉斐尔中使用不透明度进行渐变颜色填充
【发布时间】：2013-10-10 07:59:01
【问题描述】：

我无法在渐变填充颜色的元素上保持相同级别的不透明度

var paper = Raphael(0, 0, 300, 300);

paper.path(["M", 20, 20, "h", 200, "v", 200, "h", -200, "z"]).attr({
"stroke-width": 3,
stroke: 'red',
    "opacity": 0.5,
fill: "90-red-red"
});

http://jsfiddle.net/zhirkovski/vvAaz/1/

您可以看到渐变从 0.5 开始，但在达到第二种颜色时增加到 1，为什么？即使您更改了颜色，其中一个也会以 opacity = 1 呈现，这是一个错误吗？如果是这样，是否有解决方法，还是我做错了什么？

【问题讨论】：

可能与此有关 - stackoverflow.com/questions/3099247/…

标签： raphael

【解决方案1】：

从我自己的调查来看，这看起来像是 VML 和 Raphael 的限制。您可以通过以下错误报告找到更多信息：https://github.com/DmitryBaranovskiy/raphael/issues/211

它确实限制了你可以用渐变和淡化做的事情，这对我们所有人来说都是一个祸根。最好的方法是使用 jQuery：

 // Setting up defaults
 var paper = Raphael("canvas", 200, 200);
 var bgBottom = paper.rect(0, 0, 200, 200).attr({fill: "90-#999-#fff"});
 var bgTop = paper.rect(0, 0, 200, 200).attr({fill: "90-#999-#fff"});

 // New gradient to fade to
 bgBottom.attr({fill: "90-#069-#000"});
 $(bgTop.node).animate({opacity: 0}, 1000);

然后，您可以通过填充更改为顶部设置动画：

 bgTop.attr({fill: "90-#f0f-#fff"});
 $(bgTop.node).animate({opacity: 1}, 1000);

这是我的 jsfiddle 来帮助演示：http://jsfiddle.net/spQsf/

希望这会有所帮助！

【讨论】：