Geek Answers Handbook

How to add an image to the center of the circle SVG?

I am trying to add an image to the center of the 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.

+7
javascript css svg gwt
source share
2 answers

Ok, I found the answer. What I did is add 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 the attribute:

 circle.setAttribute('filter','url(#i1)');
+1
source share

Clipping should do what you are looking for: https://developer.mozilla.org/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.com/EKUTUco/1/edit?html,output

Before you, center the images in javascript according to their size using the x and y attributes.

+5
source share

More articles:


All Articles