Internet Explorer 中图像上的剪辑路径问题答案

【问题标题】：Issue with clip-path on an image in Internet ExplorerInternet Explorer 中图像上的剪辑路径问题
【发布时间】：2015-01-23 18:53:29
【问题描述】：

我正在尝试将剪辑路径应用于图像。我希望右下角被一个三角形覆盖。我可以在 Firefox、Chrome 和 Safari 中使用它。但我似乎无法让它在 Internet Explorer 中运行。尽管进行了深入搜索，但我似乎无法就如何为 IE 实现此问题得到明确的答案。一些消息来源说这样做（我看到它在 IE11 中工作）......其他人说它是not supported。让我很困惑。也许有人可以根据我使用的样式和 SVG 的以下代码示例来帮助我。提前致谢！

    .clip {
        -webkit-clip-path: polygon(0 0, 349px 0, 349px 128px, 297px 233px, 0 233px);
        clip-path: url("#clipPolygon");     
    }

    <svg width="349" height="233">
        <clipPath id="clipPolygon">
             <polygon points="0 0, 349 0, 349 128, 297 233, 0 233"></polygon>
        </clipPath>
    </svg>

【问题讨论】：

CanIUse 通常是正确的。
谢谢，我知道了。据称有示例的链接也使用了假图像。我将删除它。现在，还有其他方法可以解决这个问题吗？
你有没有想过在 SVG 中做这一切——这将允许它在 IE 中工作？ SVG 有一个方便的元素

标签： html css internet-explorer svg clipping

【解决方案1】：

IE 会将剪辑路径应用于 SVG <image> 元素。但是，它不会将剪辑路径应用于 HTML <img> 元素或背景图像或任何其他非 SVG 元素。

Safari 和 Chrome 目前 FWIW 有相同的限制，但它们支持 -webkit-clip-path，它确实适用于 HTML 元素，这就是你的示例在那里工作的原因。

Firefox 支持非 SVG 元素上的剪辑路径，这就是它在那里工作的原因。

【讨论】：