CSS 'clip-path' 不适用于 SVG 路径和多边形

Question

我正在尝试在下面的 SVG 中裁剪图像，但它没有按预期工作。我得到的是空白区域而不是裁剪图像。

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

当前结果:

预期结果:

现场演示 here

PS:我注意到如果我将 SVG 中 Clippath 组的内容更改为圆形对象，它将完美地工作。结果 here

谢谢，

Answer 1

这确实接近您正在寻找的东西 - 可能需要缩放图像并遮盖更多......

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