如何修复 Safari 中 SVG 元素旋转动画偏心抖动问题

Safari 对 SVG 中 transform-origin 的解析存在兼容性差异，常导致旋转中心偏移、视觉“甩动”；核心解决方案是显式声明 transform-origin: center 或基于 viewBox 精确设置像素坐标（如 100px 100px），并配合规范的 @keyframes 写法。

Safari 对 SVG 中 `transform-origin` 的解析存在兼容性差异，常导致旋转中心偏移、视觉“甩动”；核心解决方案是显式声明 `transform-origin: center` 或基于 viewBox 精确设置像素坐标（如 `100px 100px`），并配合规范的 `@keyframes` 写法。

在 Safari（尤其是 iOS 15.6 及更早版本）中，SVG 元素使用 transform: rotate() 动画时出现“绕非中心点旋转”或“启动瞬间偏移抖动”，根本原因并非 CSS 语法错误，而是 Safari 对 transform-origin 在 SVG 上下文中的默认行为与 Chrome/Firefox 不一致：

1. transform-origin: 50% 50% 在 Safari 中可能失效：尽管符合标准，但旧版 Safari（特别是 iOS Safari ≤15.6）对 SVG 内 transform-origin 百分比值的解析不稳定，尤其当 <svg> 未显式设置 width/height 或 viewBox 存在缩放时，百分比基准易被误判为视口而非 SVG 画布自身。
2. transform-origin: center 更可靠：该关键字在 IE9+ 及所有现代 Safari 中均被正确映射为 50% 50%，且语义明确、无单位歧义，是 SVG 旋转场景的首选写法。
3. 绝对坐标兜底方案：若仍异常，可直接使用像素值——因示例中 viewBox="0 0 200 200"，中心点即 (100, 100)，故 transform-origin: 100px 100px 能彻底规避解析偏差。

正确修复步骤如下：

1. 统一并强化 transform-origin 声明

将原 CSS 中分散的 transform-origin: 50% 50%; 替换为：

.link__cloud,.link__text {transform-origin: center; /* 推荐：语义清晰，兼容性最佳 *//* 或备选：transform-origin: 100px 100px; */}

2. 规范 @keyframes 定义（防 Safari 解析中断）

旧版 Safari 对简写 to { ... } 支持不全，必须显式定义起止帧，并统一单位：

@keyframes rotate {from { transform: rotate(0deg); } /* 必须写 from！ */to { transform: rotate(360deg); } /* 单位 deg 不可省略 */}@keyframes rotateReverse {from { transform: rotate(0deg); }to { transform: rotate(-360deg); }}

⚠️ 注意：rotate(0) → rotate(0deg)，否则 Safari 可能解析为弧度制 0rad，导致动画卡顿或跳变。

3. 添加 WebKit 前缀（iOS Safari ≤15.6 必需）

Safari 依赖 -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. 避免动画暂停导致的 Safari 渲染异常

示例中 .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;}}}

总结关键原则：

? transform-origin 必设且用 center —— SVG 旋转的生命线；

? @keyframes 必写 from/to + deg 单位 —— 防止 Safari 推导失败；

? 双 animation 声明（含 -webkit-） —— 兼容性保险；

? 禁用 CSS 变量于 @keyframes 内 —— iOS Safari ≤15.6 会整块忽略关键帧；

? 避免 animation-play-state: paused 依赖 —— 改用 class 切换或 JS 控制更可靠。

遵循以上方案，即可彻底解决 Safari 下 SVG 旋转“离心抖动”问题，实现跨浏览器一致、流畅的圆形文字与图标动画效果。