I am trying to add an image into the center of a SVG circle. I tried with patterns

<pattern id="image_birds" x="0" y="0" patternUnits="userSpaceOnUse" height="100" width="100">
<image x="0" y="0" xlink:href="birds.png" height="50" width="50"></image>
</pattern>

But it does not center the image. I am working with Javascript.

I am trying to add an image into the center of a SVG circle. I tried with patterns

<pattern id="image_birds" x="0" y="0" patternUnits="userSpaceOnUse" height="100" width="100">
<image x="0" y="0" xlink:href="birds.png" height="50" width="50"></image>
</pattern>

But it does not center the image. I am working with Javascript.

• javascript
• css
• gwt
• svg

Share Improve this question Follow edited Nov 23, 2015 at 5:16 Fawzan 4,84988 gold badges4343 silver badges8787 bronze badges asked Sep 3, 2013 at 8:06 shay levishay levi 31933 silver badges1212 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Clipping should do what you are looking for: https://developer.mozilla/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking

Something like:

<clipPath id="cut-off-bottom">
  <circle cx="100" cy="100" r="50" />
</clipPath>

<image x="25" y="25" xlink:href="http://placehold.it/150.png" height="150" width="150" clip-path="url(#cut-off-bottom)" ></image>

You can see the result of this example here: http://jsbin./EKUTUco/1/edit?html,output

Up to you to center the images in javascript according to their sizes, via x and y attributes.

Ok I found the answer. What I did is adding a filter to my svg:

<filter id = "i1" x = "0%" y = "0%" width = "100%" height = "100%">
    <feImage xlink:href = "birds.png"/>
</filter>

and in the circle add attribute:

circle.setAttribute('filter','url(#i1)');