12

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.

Dane411
  • 823
  • 1
  • 13
  • 27
tmaster
  • 9,345
  • 6
  • 24
  • 27

2 Answers2

13

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});
Sirko
  • 72,589
  • 19
  • 149
  • 183
12

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.

toniedzwiedz
  • 17,895
  • 9
  • 86
  • 131