我已经查看this question以了解如何在Safari中使用svg剪辑路径剪辑多个块。灵魂在评论中指出(在需要裁剪的元素上设置-webkit-transform:translateZ(1)
。但是如果我有图像而不是常规的div
块,我无法进行裁剪。我已经概述了一个新的代码根据链接问题中的原始代码剪断。
如果您尝试在Chrome中运行代码段,然后在Safari中运行,您会发现Safari中只显示一只小猫,但Chrome中只显示两只小猫。我想让Safari以与Chrome相同的方式剪辑图像。如果存在类似的东西,我对依赖于使用background-image:url(some.url.png)
的解决方案不感兴趣。任何帮助或建议都表示赞赏。
img{
position:relative;
height: 100px;
width: 100px;
clip-path: url(#clipping);
-webkit-clip-path: url(#clipping);
-webkit-transform:translateZ(1);
}

<svg style="background: blue; height: 0px; overflow: hidden;">
<defs>
<clipPath id="clipping" clipPathUnits="objectBoundingBox">
<path fill="#FFFFFF" d="M0.501,0.971c-0.014,0-0.027-0.003-0.04-0.011l-0.34-0.194c-0.024-0.014-0.04-0.041-0.04-0.069L0.081,0.306
c0-0.028,0.015-0.055,0.04-0.069L0.458,0.04c0.013-0.007,0.026-0.011,0.04-0.011s0.027,0.003,0.04,0.011l0.339,0.194
c0.025,0.014,0.041,0.041,0.041,0.069l0.001,0.391c0,0.028-0.015,0.055-0.04,0.069L0.542,0.96C0.529,0.968,0.515,0.971,0.501,0.971z
"/>
</clipPath>
</defs>
</svg>
<div style="background-color:green; height:100px;">
<img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg">
</div>
<div style="background-color:blue; height:100px;">
<img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg">
</div>
&#13;
答案 0 :(得分:0)
尝试-webkit-transform: translateZ(0);
作为img的父div。
-webkit-transform:translateZ(1)
我也没有工作。