創建水平線性漸變與拉斐爾

Question

進出口新的拉斐爾庫（看起來不錯，到目前爲止BTW）

我想知道如何創建水平線性漸變。

這裏是我的測試代碼，到目前爲止，大多是從實例基於我一直在尋找： -

$(function() { 
    var paper = Raphael(0, 0, $(window).width(), $(window).height()); 
    var path = paper.path("M800,100 L800,600 Q801,610 802,600 T803,600 L803,100 Q802,110 801,100 T800,100").attr({ 
     "fill": "90-#f00:5-#00f:100", 
     "fill-opacity": 0.5 
    }); 
    var pathArray = path.attr("path"); 
    handle = paper.circle(pathArray[0][1], 350, 5).attr({ 
     fill: "black", 
     cursor: "pointer", 
     "stroke-width": 1, 
     stroke: "transparent" 
    }); 
    var start = function() { 
     this.cx = this.attr("cx"), 
     this.cy = this.attr("cy"); 
    }, 
    move = function (dx, dy) { 
     var X = this.cx + dx, Y = this.cy + dy; 
     this.attr({ cx: X, cy: Y }); 
     pathArray[0][1] = pathArray[1][1] = pathArray[6][1] = X; 
     path.attr({ path: pathArray }); 
    }, 
    up = function() { 
     this.dx = this.dy = 0; 
    }; 
    handle.drag(move, start, up); 
}); 

我從SVG規範看到W3的網站有一個X1，X2，Y1，Y2屬性在實際linearGradient標籤（雖然我甚至不知道他們是否處理方向？http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement）。

我只是沒有使用拉斐爾足以知道如何設置我的路徑屬性。

乾杯， wacka。

P.S. 編輯：添加下面的幫助，但只有在IE瀏覽器的工作原理： -

$("linearGradient").attr("x1", "0"); 
$("linearGradient").attr("x2", "100%"); 
$("linearGradient").attr("y1", "0"); 
$("linearGradient").attr("y2", "0"); 

ANOTHER編輯：有趣的是，以上只能在IE工作，但在下面兩個作品（即使HTML是一樣的）： -

$("defs").children().attr("x1", "0"); 
$("defs").children().attr("x2", "100%"); 
$("defs").children().attr("y1", "0"); 
$("defs").children().attr("y2", "0"); 

出於某種原因，以下是1在IE和0鉻： -

$("lineargradient").length 

現在，雖然這個工作，肯定必須有一個更好的方式？

Answer 1

這裏是一個水平和垂直漸變矩形的例子。

paper.rect(100,100,200,200).attr({"fill":"0-#f00:5-#00f:100"}); 
paper.rect(300,300,200,200).attr({"fill":"90-#f00:5-#00f:100"}); 

填充中的第一個值是您的漸變的角度。您可以將其應用於您的路徑。