3

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

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 呈现，这是一个错误吗？如果是这样，是否有解决方法，还是我做错了什么？

4

1 回答 1

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/

希望这可以帮助！

于 2013-07-16T08:22:48.297 回答