How can I display an image inside SVG circle in html5?

Question

Is there a way to display an image inside SVG Circle ?

I tried adding the image inside Svg element but the image does not appear in the circle.

<svg width="100" height="100">
<circle cx="50" cy="50" r="40"stroke="green" stroke-width="4" fill="yellow" />
<img src="starkeen_ane.jpg"/>
 </svg>

Can you help me?

Answer 1

It is maybe not the best way to do it. but it works very good. The thing you can do it place it to a relative position and edit top and left properties so you image is in the center of your svg image. Also important is to place it outside your svg-tag.

img {
  position: relative;
  top: -30px;
  left: -70px;
}

<svg width="100" height="100">
<circle cx="50" cy="50" r="40"stroke="green" stroke-width="4" fill="yellow" />
 </svg>
<img src="http://i.stack.imgur.com/vxCmj.png"/>

Answer 2

Here is an example elaborating on Havenard's comment above:

<svg width="500" height="250">
    <defs>
        <clipPath id="circleView">
            <circle cx="250" cy="125" r="125" fill="#FFFFFF" />
        </clipPath>
    </defs>
    <image 
      width="500" 
      height="250" 
      xlink:href="https://www.amrita.edu/sites/default/files/news-images/new/news-events/images/l-nov/grass.jpg" 
      clip-path="url(#circleView)"
    />
 </svg>

You don't actually draw a <circle> element with an image inside - instead, define a circular clip path, and set it as the 'clip-path' attribute on the <image> tag.