0

What am I doing wrong ? The background doesn't set properly.

<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="1101px" height="617px" viewBox="0 0 1101 617" enable-background="new 0 0 1101 617" xml:space="preserve">
      <defs>
        <pattern id="image" patternUnits="userSpaceOnUse" height="150" width="150">
          <image x="30" y="0" height="150" width="150" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image>
        </pattern>
      </defs>

    <circle fill="url(#image)" stroke="#676467" stroke-width="3" stroke-miterlimit="10" cx="186.051" cy="489.94" r="63.29"/>
</svg>

Sample: http://prntscr.com/amjogg

justdee
  • 71
  • 1
  • 1
  • 7
  • Can you explain why your svg needs to be 1101x617? When I match the svg height and width to the image and offset the circle by half those values, everything lines up: http://codepen.io/angeliquejw/pen/RaLWZQ?editors=1000 – Angelique Mar 31 '16 at 22:09

1 Answers1

0

You are using the image as a fill pattern, so it doesn't stretch or anything. You use x and y in the image to set the image position in the pattern, which can set a padding in the pattern so to speak. Then the pattern gets applied.

In your case you have a 150x150 pattern with a 150x150 image that is offset 30 pixels to the right, so the pattern looks like 120 pixels of image with a 30 pixel white padding to the left.

Without knowing what your intention was, I don't know what "properly" means in your context.

Siderite Zackwehdex
  • 6,293
  • 3
  • 30
  • 46
  • I set x to 0. By "properly" I mean the picture is centered. How can I style xml ? For example to push the image 10px top. – justdee Mar 31 '16 at 20:48
  • Well, for my test I added code to move the circle around. The background does not move with the circle. So the only solution I see is to change the position of the pattern to be the same as the one of the circle (minus the radius) – Siderite Zackwehdex Mar 31 '16 at 20:58
  • Is it possible via css? – justdee Mar 31 '16 at 21:00
  • or what's the best way? – justdee Mar 31 '16 at 21:08
  • I deleted that comment, because I couldn't make it work with the answer there, but your question has been asked before: http://stackoverflow.com/questions/11496734/add-a-background-image-png-to-a-svg-circle-shape – Siderite Zackwehdex Mar 31 '16 at 21:15