No Display Of Image As A Pattern In Svg Circle

I'm trying to display an image in an svg circle in the context of an html page with the following lines :

Solution 1:

<svg width="260" height="120">
  <defs>
    <pattern id="Triangle" width="10" height="10" patternUnits="userSpaceOnUse">
      <polygon points="5,0 10,10 0,10" />
    </pattern>
    <pattern id="Img" width="100" height="100" patternUnits="userSpaceOnUse">
      <image x="0" y="0" width="100%" height="100%" xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/46/A_Meat_Stall_with_the_Holy_Family_Giving_Alms_-_Pieter_Aertsen_-_Google_Cultural_Institute.jpg"></image>
    </pattern>
  </defs>

  <circle cx="60" cy="60" r="60" fill="url(#Img)" stroke="red" />
  <circle cx="200" cy="60" r="60" fill="url(#Triangle)" stroke="red" />
</svg>

Share