1

Raphaelライブラリを初めて使用します（これまでのところ見栄えがします）

水平方向の線形グラデーションを作成する方法を考えていました。

これまでの私のテストコードは、主に私が見てきた例に基づいています：-

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

w3サイトのSVG仕様から、実際のlinearGradientタグにx1、x2、y1、y2属性があることがわかります（方向を処理するかどうかさえわかりませんが？http：//www.w3.org/TR /SVG/pservers.html#LinearGradientElement）。

パス属性でそれを設定する方法を知るのに十分なほどRaphaelを使用していません。

乾杯、ワッカ。

PS編集：以下を追加すると役立ちますが、IEでのみ機能します：-

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

別の編集：興味深いことに、上記はIEでのみ機能しましたが、以下は両方で機能します（HTMLは同じですが）：-

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

何らかの理由で、以下はIEでは1、chromeでは0です：-

$("lineargradient").length

さて、これは機能しますが、確かにもっと良い方法があるはずですか？

4

1 に答える 1

3

これは、水平方向と垂直方向のグラデーションを持つ長方形の例です。

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"});

塗りつぶしの最初の値は、グラデーションの角度です。あなたはそれをあなたの道に適用することができます。

于 2012-04-26T13:56:26.883 に答える