は、私は水平直線勾配を作成する方法を思っていたラファエル

Question

ラファエルライブラリに新しい

イム（これまでところで偉大に見える）

と水平直線勾配を作成します。 X1、X2、Y1、Y2があり、私はW3のサイト上でSVGの仕様から見る

$(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); 
}); 

- ：ここで

は私のテストコードは、ほとんど私が見てきた例からベース、これまでのところです実際のlinearGradientタグの属性（ただし、向きを処理するかどうかはわかりませんが、http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement）。

私はラファエルをパス属性で設定する方法を知っていないだけです。

乾杯、 wacka。

P.S. EDITは：次のように追加することができますが、IEのみで動作します： -

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

ANOTHER EDIT：興味深いことに、上記のはIEだけで働いていたが、両方で、次の作品（HTMLが同じであっても）： - 以下、いくつかの理由

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

はクロムでIEで1と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"}); 

フィルの最初の値はグラデーションの角度です。それをあなたのパスに適用することができます。