Question

我正在尝试将剪辑路径应用于图像。我希望右下角被三角形覆盖。我已经在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>

Answer 1

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

Safari和Chrome目前在FWIW上也有相同的限制，但它们支持-webkit-clip-path，它可以在HTML元素上运行，这就是为什么你的例子在那里工作的原因。

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

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

1 个答案: