Question

我在使用渐变填充颜色的元素上保持相同级别的不透明度时遇到了麻烦

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，这是一个错误吗？如果是这样的解决办法，或者是我做错了什么？

Answer 1

从我自己的调查来看，这看起来像VML的限制，随后是拉斐尔。您可以通过以下错误报告找到更多信息：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/

希望这有帮助！

渐变色填充raphael中的不透明度

1 个答案: