Создание горизонтального линейного градиента с Рафаэлем

Я новичок в библиотеке Рафаэля (кстати, пока выглядит отлично)

Мне было интересно, как создать горизонтальный линейный градиент.

Вот мой тестовый код, в основном основанный на примерах, которые я просматривал: -

$(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).

Я просто недостаточно использовал Рафаэля, чтобы знать, как установить это в моем атрибуте пути.

Ура, вака.

P.S. РЕДАКТИРОВАТЬ: добавление следующих подсказок, но работает только в 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

Теперь, хотя это работает, неужели должен быть способ получше?


javascript gradient raphael
person Wacka    schedule 26.04.2012    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вот пример прямоугольника с горизонтальным и вертикальным градиентом.

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

первое значение заливки - это угол градиента. Вы можете применить это к своему пути.

person amadan    schedule 26.04.2012
comment
ааа ... так просто ... Полагаю, следующее число - это процент по пути? - person Wacka; 26.04.2012
comment
Я научу человека ловить рыбу ... посмотрите raphaeljs.com/reference.html#Element .attr, а именно градиенты. Там это объясняется довольно лаконично. - person amadan; 26.04.2012
comment
Я видел это, но не видел, как повернуть градиент ... моя следующая проблема - попытаться сделать это (20thingsilearned.com/en-GB) с Рафаэлем: P - person Wacka; 26.04.2012
comment
Я так долго искал, как это сделать. Это отличный ответ для тех, кто хочет полосатый узор, но не может использовать URL-адрес (# что угодно) в путях Рафаэля. Я добавил очень длинный нестандартный градиент, и это помогло. - person Rowland Rose; 11.02.2020