html - 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

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>