Safari 转换 SVG 错误答案

【问题标题】：Safari transforms SVG wrongSafari 转换 SVG 错误
【发布时间】：2020-12-27 03:25:02
【问题描述】：

我用一个简单的 svg 制作了一个小 CSS 动画，将我的汉堡菜单转换为十字形。它在 Chrome 和 Firefox 上按预期工作，但在 Safari 中翻译已关闭。动画播放，甚至正确重置，所以它与前缀无关（我试过）。交叉的两条线的翻译是错误的。我猜这与 safari 在应用缩放时如何处理变换有关。有谁知道是否有解决方法/或我做错了什么？

JSFiddle

Safari / 火狐 / 铬

@keyframes showCross {
  0% {
   transform: scale(1) rotate(0);
  }

 40% {
   transform: scale(0.3) rotate(280deg);

 }

 100% {
   transform: scale(1) rotate(360deg);
 }
}

@keyframes showCross_P1 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(-45deg) translate(-42%, -10%);
  }
}

【问题讨论】：

标签： css svg safari webkit

【解决方案1】：

我通过以下操作修复了它：

首先，我删除了路径周围的组。然后我给所有路径以下值：

transform-origin:center center;
transform-box: fill-box;

接下来我编辑了动画关键帧，如下所示：

0% {
   transform:  translate(0rem,0rem) rotate(0);
}
100% {
   transform: translate(-10rem,-38rem) rotate(-45deg) ;
}

Safari 的百分比有问题，而且如果您在翻译之前放置旋转，它与其他浏览器不一致，请改用 rem！

【讨论】：