多个图像上的 svg 剪辑路径在 Safari 中不起作用答案

【问题标题】：Clip path from svg on multiple images does not work in Safari多个图像上的 svg 剪辑路径在 Safari 中不起作用
【发布时间】：2017-07-09 13:19:34
【问题描述】：

我查看了this question，以了解如何在 Safari 中使用 svg 剪辑路径剪辑多个块。在 cmets 中指出的灵魂（在需要剪辑的元素上设置 -webkit-transform:translateZ(1)。但是，如果我有图像而不是常规的 div 块，我将无法进行剪辑。我已经概述了一个基于来自链接问题的原始问题。

如果你尝试在 Chrome 中运行 sn-p，然后在 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>

https://codepen.io/Johnonym/pen/jyjzgQ

【问题讨论】：

关于多重兼容性问题，我建议不要使用clip-path。 caniuse.com/#search=clip-path
感谢您的链接。你碰巧知道另一种方法吗？我只做一个带圆角的正方形作为我项目的剪切路径。我正在考虑将图像封装在容器 div 中，将溢出设置为隐藏，并尝试将图像转换为仅显示其中的某个部分。不过我还没试过。
我尝试了一种不同的方法，就像我在上面的评论中提到的那样，现在它可以工作了。

标签： html css svg safari

【解决方案1】：

尝试-webkit-transform: translateZ(0);作为img的父div。

-webkit-transform:translateZ(1) 我也没有用。

【讨论】：