CODEWITHSUNDEEP
csssvg
shadeed9
shadeed9

Reputation: 1836

CSS 'clip-path' doesn't work with SVG Paths and Polygons

I'm trying to clip an image in the below SVG but it doesn't work as expected. I got an empty space instead of the clipped image.

The SVG File

<svg width="0" height="0">
  <defs>
    <clipPath id="mask">
        <circle cx="411.5" cy="254.8" r="162.5"/>
        <polygon points="532.4,363.3 411.7,484.4 290.8,363.5 411.7,242.6 "/>
    </clipPath>
  </defs>
</svg>

CSS:

img {
    width: 170px;
    height: 170px;
    clip-path: url(#mask);
    -webkit-clip-path: url(#mask);
    border: 1px solid #000;
}

The current result: enter image description here

The expected result:

enter image description here

Live demo here

PS: I noticed that If I changed the content of Clippath group in the SVG to circle objects, it will work perfectly. Result here

Thanks,

Upvotes: 1

Views: 997

Answers (1)

PCDubb
PCDubb

Reputation: 56

This does close to what you're looking for - may need to scale the image and mask a little more...

<svg class="svg-graphic" width="700" height="400" viewBox="0 0 840 550" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <g>
       <clipPath id="hexagonal-mask">
                 <circle cx="411.5" cy="254.8" r="162.5"/>
                 <polygon points="532.4,363.3 411.7,484.4 290.8,363.5 411.7,242.6 "/>
       </clipPath>
    </g> 
    <a xlink:href="http://www. web-expert.it">
     <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg"/>
    </a>
</svg>

Upvotes: 1

Related Questions