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>