Как назначить градиентную заливку фигуре SVG через JavaScript?

Question

Я создаю SVG-прямоугольник, используя библиотеку Raphael JavaScript, и назначаю ему заливку, используя следующую строку кода:

this.myBox.attr({fill: 'white'});

Это отлично работает. Однако теперь я хочу связать это с линейным градиентом. Я позаимствовал некоторый градиентный код, чтобы проверить его, используя код ниже:

<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>

И чтобы присвоить это фигуре, я попытался сделать это:

this.myBox.attr({fill:url(#orange_red)});

В этом случае я получаю сообщение об ошибке "Недопустимый символ" # "".

Где я иду не так?

Answer 1

this.myBox.attr({fill: "315-rgb(255,255,0)-rgb(255,0,0)"});

Если вы свяжете это с линейным градиентом, как вы делаете, это, очевидно, не будет работать в IE. И если вас не волнует IE, то какой смысл использовать Raphaël в первую очередь?

Answer 2

Вы просто забыли процитировать строку значения.

this.myBox.attr({fill: 'url(#orange_red)'});

Причуда JavaScript состоит в том, что в буквальном синтаксисе объекта ({ ... }) часть имени fill не всегда должна заключаться в кавычки 'fill'. Однако значение может быть любого типа, поэтому для строк всегда нужно заключать в кавычки.