剪辑路径渐变动画在Safari中不起作用

Question

我有一个动画渐变标志。它是使用内联svg路径创建的，我将其用作带有动画渐变背景的div的剪辑路径。在Chrome和Firefox中一切正常，但Safari就不行。我尝试过在使用和不使用-webkit-前缀的情况下使用clip-path属性，都不起作用。如果使用前缀，则不显示任何内容。如果没有前缀，渐变动画将按没有剪辑路径的方式显示。

感谢任何能帮助我们的人！

我已经将代码放在codepen中：https://codepen.io/lanlanonearth/pen/JgYPYa

Answer 1

在偶然发现这个链接后，我修复了这个问题：CSS clip-path only works properly on first element in Safari 10 #27，原来Safari在映射svg和html元素之间的坐标系时有一些错误。只需将transform: translateZ(0)作为一种重置添加到div就可以解决这个问题。