漸變色填充拉斐爾

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/

希望這可以幫助！