Internet Explorer 中图像上的剪辑路径出现问题

Question

我正在尝试将剪辑路径应用于图像。我希望右下角被三角形覆盖。我已经在Firefox，Chrome和Safari中工作了。但我似乎无法让它在IE浏览器中工作。尽管进行了密集搜索，但我似乎无法就如何为 IE 实现这一点的问题获得明确的答案。一些消息来源说这样做（我看到这在 IE11 中工作）......其他人说它不受支持。让我一头雾水。也许有人可以根据我使用的样式和 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>

Answer 1

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

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

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