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