我clip-path
在Chrome中遇到问题。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图像,这就是为什么它可以在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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句