渐变色填充拉斐尔

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，为什么？即使你改变颜色，其中一个渲染在不透明度= 1，这是一个错误？如果是的话还有解决办法，还是我做错了什么？

Answer 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/

希望这可以帮助！