How to assign gradient fill to SVG shape via JavaScript?

Question

Hi,

I'm creating an SVG rectangle using the Raphael JavaScript library, and assigning it a fill using the following line of code:

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

This works fine. However, now I want to tie this to a linear gradient. I have borrowed some gradient code to test it out, using the code below:

<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>

And in order to assign this to the shape, I tried doing this:

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

In this case, I get the error 'Illegal character '#''.

Where am I going wrong?

Answer 1

You've simply forgotten to quote the value string.

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

It is a quirk of JavaScript that in the object literal syntax ({...}) the name part fill doesn't always need to be quoted as 'fill'. However the value can be of any type and so for strings always needs to be quoted.

Answer 2

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

If you will tie this to linear gradient the way you do, it obviously wouldn’t work in IE. And if you don’t care about IE, then what the point to use Raphaël in the first place?