How to set a SVG rect element's background image with jQuery SVG plugin?

Question

I created a SVG rect using keith-wood's jQuery SVG plugin. Here is the code:

svg.graph._wrapper.rect(group, 0, 100, 40, 20,
                       {fill: 'ivory',
                        stroke: 'black',
                        strokeWidth : 2});

So I thought I could easily change the fill instead of using 'ivory', I changed it to 'theImageIwantToUse'. But it does not seem to work.

Answer 1

You can't insert an external image directly as the background to SVG objects.

Instead, you first have to create a patttern like this

var ptn = svg.pattern(defs, "imgPattern", 0, 0, 100, 100, 0, 0, 10, 10, 
                      {patternUnits: "userSpaceOnUse"});
svg.image( ptn, 100, 50, 200, 200, "./theImageIwantToUse.png");

and use this pattern then via the url() function in the fill attribute

svg.graph._wrapper.rect(group, 0, 100, 40, 20,
                       {fill: 'url(#imgPattern)',
                        stroke: 'black',
                        strokeWidth : 2});