Safari中SVG旋转动画偏心抖动的修复方法

Safari 对 SVG 中 transform-origin 的解析存在兼容性差异，常导致旋转中心偏移和视觉上的“甩动”。常见修复方式是显式声明 transform-origin: center，或根据 viewBox 精确设置像素坐标，例如 100px 100px，并配合规范的 @keyframes 写法。

在 Safari 中，尤其是 iOS 15.6 及更早版本，SVG 元素使用 transform: rotate() 动画时，容易出现“绕非中心点旋转”或“启动瞬间偏移抖动”的情况。这通常不是 CSS 语法错误，而是 Safari 对 SVG 场景下 transform-origin 的默认处理方式与 Chrome、Firefox 存在差异所致。

Safari 中 SVG 旋转动画偏心抖动的原因

• transform-origin: 50% 50% 在 Safari 中可能不稳定：旧版 Safari，特别是 iOS Safari 15.6 及以下版本，对 SVG 内 transform-origin 百分比值的解析并不稳定。当 未显式设置 width、height，或者 viewBox 存在缩放时，百分比基准可能被错误理解为视口，而不是 SVG 画布本身。
• transform-origin: center 兼容性更好：该关键字在 IE9+ 以及现代 Safari 中通常都能正确映射为 50% 50%，语义更清晰，也没有单位歧义，更适合 SVG 旋转动画场景。
• 可使用绝对坐标作为兜底方案：如果仍存在异常，可直接使用像素值。例如示例中 viewBox="0 0 200 200"，其中心点就是 (100, 100)，因此使用 transform-origin: 100px 100px 可以有效规避解析偏差。

Safari 修复 SVG 旋转中心偏移的正确方法

1. 统一并明确声明 transform-origin

建议将原本分散的 transform-origin: 50% 50%; 替换为更稳定的写法：

.link__cloud,
.link__text {
transform-origin: center; /* 推荐写法 */
/* 或备选：transform-origin: 100px 100px; */
}

2. 规范编写 @keyframes，避免 Safari 解析中断

旧版 Safari 对简写形式的支持不完整，建议显式定义起始帧和结束帧，并统一使用 deg 单位：

@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes rotateReverse {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}

需要注意的是，rotate(0) 应写为 rotate(0deg)。否则在 Safari 中可能引发解析异常，造成动画卡顿或跳变。

3. 为动画补充 WebKit 前缀

在 iOS Safari 15.6 及以下版本中，添加 -webkit-animation 有助于动画触发和关键帧正确解析：

.link__cloud {
-webkit-animation: rotate normal infinite 60s linear;
animation: rotate normal infinite 60s linear;
}
.link__text {
-webkit-animation: rotateReverse normal infinite 20s linear;
animation: rotateReverse normal infinite 20s linear;
}

4. 尽量避免依赖动画暂停触发渲染问题

如果使用 .link:hover .link__text { animation-play-state: paused; }，在 iOS Safari 中可能出现暂停失效或残留旋转。更稳妥的方式是通过 class 切换来控制动画启停。示例如下：

.link__text {
animation: rotateReverse 20s linear infinite;
}
.link:hover .link__text {
animation-play-state: paused;
}
/* Safari 兼容处理 */
@media not all and (min-resolution: .001dpcm) {
@supports (-webkit-appearance: none) {
.link:hover .link__text {
animation: none;
-webkit-animation: none;
}
}
}

修复 Safari 中 SVG transform-origin 问题的关键要点

transform-origin 必须显式设置，优先使用 center。这是保证 SVG 旋转动画中心正确的核心前提。

@keyframes 应明确写出 from 和 to，并带上 deg 单位。这样更有利于 Safari 稳定解析动画。

animation 建议同时保留标准写法和 -webkit- 前缀写法，有助于提升旧版 Safari 的兼容性。

不要在 @keyframes 中使用 CSS 变量。在 iOS Safari 15.6 及以下版本中，这类写法可能导致整段关键帧失效。

尽量减少对 animation-play-state: paused 的依赖，改用 class 切换或 JS 控制会更稳定。

总结

如果 Safari 下 SVG 旋转动画出现偏心、抖动或启动瞬间错位，优先检查 transform-origin 是否明确设置，并使用更稳定的 center 或基于 viewBox 的绝对坐标。同时规范编写 @keyframes，补充 -webkit-animation 前缀，并避免使用容易触发兼容问题的暂停方式。按照以上方案处理，通常可以有效解决 Safari 中 SVG 元素旋转动画偏心抖动的问题，实现更一致、更流畅的跨浏览器动画效果。