CODEWITHSUNDEEP
htmlsvg
Jbb
Jbb

Reputation: 623

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 :

<html>
  <head>
  </head>
  <body>
    <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="corruscant.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>
  </body>
</html>

This 'should' work according to what I read on many documentations/examples/posts such as :

But it doesn't. Triangles appear in the second circle, so svg structure is ok I guess..

I've tried to copy/paste the jsfiddle example but the landscape does not show itself.

I'm looking for elements that my naïve approach has not taken in account.

Thanks

Upvotes: 0

Views: 1682

Answers (1)

CoderPi
CoderPi

Reputation: 13211

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

Upvotes: 1

Related Questions