剪辑路径渐变动画在 Safari 中不起作用
Clip-path gradient animation not working in Safari
我有一个动画渐变徽标。它是用内联 svg 路径制作的，我将其用作 div 的剪辑路径，并带有动画渐变背景。在 Chrome 和 Firefox 中一切正常，但在 Safari 中不正常。我尝试让 clip-path 属性带有和不带 -webkit- 前缀，并且 none 有效。使用前缀，不显示任何内容。没有前缀，渐变动画显示为没有剪辑路径。
感谢任何能提供帮助的人！
我已将代码放入 codepen：https://codepen.io/lanlanonearth/pen/JgYPYa
我在偶然发现这个 link 解释它之后修复了它：CSS clip-path only works properly on first element in Safari 10 #27 事实证明，Safari 有一些错误映射 svg 和 html 元素之间的坐标系。只需添加 transform: translateZ(0) 作为对 div 的重置即可解决问题。
我有一个动画渐变徽标。它是用内联 svg 路径制作的，我将其用作 div 的剪辑路径，并带有动画渐变背景。在 Chrome 和 Firefox 中一切正常，但在 Safari 中不正常。我尝试让 clip-path 属性带有和不带 -webkit- 前缀，并且 none 有效。使用前缀，不显示任何内容。没有前缀，渐变动画显示为没有剪辑路径。
感谢任何能提供帮助的人！
我已将代码放入 codepen：https://codepen.io/lanlanonearth/pen/JgYPYa
我在偶然发现这个 link 解释它之后修复了它：CSS clip-path only works properly on first element in Safari 10 #27 事实证明，Safari 有一些错误映射 svg 和 html 元素之间的坐标系。只需添加 transform: translateZ(0) 作为对 div 的重置即可解决问题。