我在 Chrome 中遇到 clip-path
问题。 Firefox 没有问题并正确显示此 html 页面,但 chrome 不显示任何内容。
img {
-webkit-clip-path: url(#clipping);
clip-path: url(#clipping);
}
<svg>
<defs>
<clipPath id="clipping">
<circle cx="284" cy="213" r="213" />
</clipPath>
</defs>
</svg>
<img src="http://i.stack.imgur.com/MnWjF.png" width="728" height="482" >
最佳答案
Webkit 不支持将 SVG clipPath 应用于 html 图像。如果您将图像设为 SVG 图像,即将标签更改为 <image>
并将其放入 <svg>
中元素然后它将起作用。
Firefox 确实支持将 SVG clipPath 应用于 HTML 图像,这就是它在那里工作的原因。
这是 Pancho 提供的示例。
<svg width="245" height="180" viewBox="0 0 245 180" >
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="something.jpg" width="245" height="180" class="MyClipping" ></image>
</svg>
关于css - 剪辑路径不适用于 chrome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19227849/