CODEWITHSUNDEEP
javascripthtmlcsssvg
whutupgangster
whutupgangster

Reputation: 11

is it possible to have an img or div nested in svg polygon

I want to nest an img or a div in an SVG polygon, but when I try it seems as if the image is not nested or a child of the polygon. So basically the reason is that I want to make a slideshow within a triangle.. Other ideas on doing this would be nice too :)

The svg tag is working without the nested IMG, so I don't think that's where the flaw is. I opened the polygon tag and nested the IMG inside. Like so:

<svg>
  <polygon>
    <IMG SRC=""/>
    </polygon>
  </svg>

I know that polygon is usually a self-closing tag, but thought it might work

Upvotes: 1

Views: 428

Answers (1)

blex
blex

Reputation: 25659

You cannot nest an image in a polygon tag. However you can use this method to clip an image with an SVG:

image{
    clip-path:url(#triangle);
}
<svg width="40%" height="40%" xml:lang="fr" viewBox="0 0 500 432.5" preserveAspectRatio="xMidYMid meet" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <clipPath id="triangle">
        <polygon points="0.4,432.5 250.1,0 499.8,432.5 "/>
    </clipPath>
</defs>
    <image xlink:href="https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg" width="500" height="300"/>
</svg>

Upvotes: 2

Related Questions