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.

Solution 1

You can insert images in your svg by using the <image> element http://www.w3.org/TR/SVG/struct.html#ImageElement

An appropriate function is available in the plugin you mentioned.

svg.image(parent, x, y, width, height, ref, settings)  

( http://keith-wood.name/svg.html )

I doubt it's possible to use stroke in an image so you'll have to draw a rectangle with no fill after drawing the image to get the exact result you want.

Solution 2

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