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

【问题标题】：CSS 'clip-path' doesn't work with SVG Paths and PolygonsCSS 'clip-path' 不适用于 SVG 路径和多边形
【发布时间】：2015-05-10 16:26:33
【问题描述】：

我正在尝试在下面的 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

谢谢，

【问题讨论】：

标签： css svg

【解决方案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>

【讨论】：