Javascript 用拉斐尔创建水平线性渐变

我是拉斐尔图书馆的新手（顺便说一句，到目前为止看起来很棒）

我想知道如何创建水平线性渐变

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

以下是我到目前为止的测试代码，主要基于我所看到的示例：-

$(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属性（尽管我甚至不确定它们是否处理方向？）

我只是没有充分使用Raphael，不知道如何在我的路径属性中设置它

干杯， 怪人

附言。 编辑：添加以下帮助，但仅适用于IE：-

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

另一个编辑：有趣的是，上面的内容只在IE中起作用，但以下内容在两者中都起作用（尽管HTML是相同的）：-

出于某种原因，IE中的1和chrome中的0分别为：-

$("lineargradient").length

---

现在，虽然这样做有效，但肯定有更好的方法吗？

这里有一个带有水平和垂直渐变的矩形示例

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

---

填充中的第一个值是渐变的角度。您可以将其应用于您的路径。

啊。。。这么简单。。。我想下一个数字是沿途的百分比？我会教一个人钓鱼。。。看看，特别是梯度。这里的解释非常简洁。我确实看到了，但看不到如何改变梯度。。。我的下一个问题是尝试用Raphael来做这个（）：PI花了很长时间研究如何做。对于那些想要条带模式但不能在Rafael路径中使用“url（#whatever）”的人来说，这是一个很好的答案。我加入了一个很长的自定义渐变，这就成功了。