Safari中transform rotate关键帧动画偏心晃动问题修复咨询

问题原因 #

Safari对SVG元素的transform-box和transform-origin解析存在兼容性问题，导致旋转时变换原点偏离视觉中心。

修复方案 #

方法1：统一设置变换盒与原点

给所有需要变换的SVG子元素明确指定transform-box: fill-box和中心原点，替换原有CSS规则：

/* 统一设置变换基准 */
.link__cloud, .link__text, .link__face, .link__arrow {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* 保留原有动画与过渡规则 */
.link__cloud {
  animation: rotate normal infinite 60s linear;
  fill: rgba(255, 255, 255, 0.15);
}

.link__face, .link__arrow {
  transition: transform 0.15s cubic-bezier(0.32, 0, 0.67, 0);
}

.link:hover .link__face, .link:hover .link__arrow {
  transform: scale(1.1);
  transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

.link__text {
  animation: rotateReverse normal infinite 20s linear;
}

方法2：使用具体坐标作为原点（更兼容）

由于SVG的viewBox为0 0 200 200，视觉中心坐标是100 100，直接用像素值指定原点可避免百分比解析偏差：

.link__cloud, .link__text, .link__face, .link__arrow {
  transform-origin: 100px 100px;
}

原理 #

• transform-box: fill-box强制浏览器以元素自身的填充边界作为变换参考系，而非默认的SVG视口；
• 具体坐标原点绕过了Safari对百分比原点的解析差异，确保旋转中心精准对应SVG视觉中心。

内容的提问来源于stack exchange，提问作者Adler