Safari 浏览器对 SVG 中 transform-origin 的解析存在兼容性问题，常见表现为旋转中心偏移、动画“偏心抖动”或视觉甩动。更有效的修复方法，是显式声明 transform-origin: center，或结合 viewBox 精确指定像素坐标（如 100px 100px），并同时使用规范的 @keyframes 动画写法。
Safari 在处理 SVG 元素的 transform-origin 时，长期存在一些细小却影响明显的兼容性差异，最终很容易导致旋转中心错位，动画看起来像突然“甩”了一下，不够平滑稳定。更推荐的优化方式，是明确写出 transform-origin: center；如果项目对旋转中心精度要求更高，则可以依据 viewBox 直接设置具体像素坐标，例如 100px 100px。再配合标准、完整的 @keyframes 写法，通常就能有效修复 Safari 中 SVG 旋转动画抖动的问题。
在 Safari（特别是 iOS 15.6 及更早版本）中，SVG 元素使用 transform: rotate() 制作旋转动画时，经常会出现“不是围绕中心点旋转”或“动画启动瞬间发生偏移抖动”的现象。其根本原因通常并不是 CSS 语法写错，而是 Safari 对 SVG 场景下 transform-origin 的默认解析方式，与 Chrome 和 Firefox 存在差异：
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 旋转中心问题时更推荐的写法。- 使用绝对坐标作为兜底方案：如果设置
center后依然存在偏移，可以直接改用像素坐标。比如示例中的viewBox="0 0 200 200"，中心点就是(100, 100)，因此设置transform-origin: 100px 100px能更彻底地避免 Safari 解析偏差。
✅ 正确修复 Safari 中 SVG 旋转偏心抖动的步骤如下：
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 —— 这是修复 Safari 下 SVG 旋转中心偏移的核心；
? @keyframes 一定要明确写出 from/to，并补全 deg 单位 —— 否则 Safari 很容易出现动画解析失败；
? animation 建议同时保留标准写法与 -webkit- 前缀 —— 这样可以进一步提升旧版 Safari 的兼容性；
? 不要在 @keyframes 中依赖 CSS 变量 —— 在 iOS Safari ≤15.6 中，整段关键帧有可能被直接忽略；
? 尽量不要过度依赖 animation-play-state: paused —— 更稳定的方案是改用 class 切换或 JavaScript 控制动画状态。
按照以上优化方案处理后，基本可以彻底修复 Safari 浏览器中 SVG 元素旋转动画“离心抖动”与偏移问题，从而实现跨浏览器一致、顺滑稳定的圆形文字与图标旋转动画效果。
