Safari 对 SVG 中 transform-origin 的解析存在兼容性差异，常导致旋转动画绕非中心点抖动或“甩出”，需显式指定绝对坐标或使用更稳定的 center 值，并配合关键帧完整性、单位统一与前缀补全等多重修复策略。
safari 对 svg 中 `transform-origin` 的解析存在兼容性差异，常导致旋转动画绕非中心点抖动或“甩出”，需显式指定绝对坐标或使用更稳定的 `center` 值，并配合关键帧完整性、单位统一与前缀补全等多重修复策略。
在 Safari（尤其是 iOS 15.6 及更早版本）中，SVG 元素使用 transform: rotate() 配合 @keyframes 实现无限旋转时，极易出现「绕左上角或随机点偏心旋转」的视觉异常——即所谓 off-center wobble。这并非代码逻辑错误，而是 Safari 对 SVG 坐标系与 transform-origin 的解析机制与其他浏览器（Chrome/Firefox）存在本质差异。
? 根本原因：transform-origin 在 SVG 中的歧义性
- CSS 规范中，
transform-origin: 50% 50%在 HTML 元素中默认相对于盒模型中心，但在 SVG 内部（尤其<textpath></textpath>、<path></path>等图形元素）中，Safari 会将其解析为相对于 SVG viewport 左上角的百分比偏移，而非<svg></svg>元素自身的几何中心。 - 更严重的是：当
viewBox="0 0 200 200"时，50% 50%理论上应等于100px 100px，但 Safari 某些版本（如 iOS 15.4）会因解析优先级或继承链中断而忽略该计算，回退到默认0 0（左上角）。
✅ 推荐修复方案（按优先级排序）：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
1. 显式使用绝对坐标（最可靠）
.link__cloud,
.link__text {
transform-origin: 100px 100px; /* 精确匹配 viewBox 中心 */
animation: rotate 60s linear infinite;
}✅ 优势：完全规避百分比解析歧义；兼容所有 Safari 版本（含 iOS 12+）
⚠️ 注意：必须与<svg viewbox="0 0 200 200"></svg>严格对应；若 viewBox 改变，需同步更新数值。
2. 使用 transform-origin: center（语义清晰，现代兼容）
.link__cloud,
.link__text {
transform-origin: center; /* IE9+/Safari 12.1+ 均支持，比 50% 50% 更稳 */
animation: rotate 60s linear infinite;
}✅ 优势：语义明确、无需计算、自动适配缩放与 viewBox 变化
? 实测：iOS 15.6+ 和 macOS Monterey+ 完全支持；旧版 Safari（≤15.4）建议降级为100px 100px
3. 补全 @keyframes 关键帧 + 单位强制统一（防 Safari 解析失败）
原代码仅写 to { transform: rotate(360deg); }，Safari 可能无法推导起始态，导致首帧跳变：
@keyframes rotate {
from { transform: rotate(0deg); } /* 必须显式声明起点 */
to { transform: rotate(360deg); } /* 统一使用 deg，禁用 rotate(0) 或 rotate(360) */
}
@keyframes rotateReverse {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}4. 添加 -webkit- 前缀（iOS Safari 15.6 及更早必需）
.link__cloud,
.link__text {
-webkit-animation: rotate 60s linear infinite;
animation: rotate 60s linear infinite;
}
/* 同时为 @keyframes 加前缀（部分旧版 Safari 要求） */
@-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}⚠️ 附加注意事项
-
禁用 CSS 变量于
@keyframes内：iOS Safari 15.6 之前完全不解析var(--deg)，会导致整个@keyframes块失效； -
避免组合变换干扰：如
rotate() scale()同时存在，Safari 对transform解析顺序极敏感，建议拆分为独立动画或用transform: rotate(...) translate(...)显式拼接； -
disabled状态下动画冻结是规范行为：按钮设disabled后子 SVG 动画自动暂停，属标准实现，非 bug，无需 hack。
✅ 最终推荐最小可运行配置
.link__cloud, .link__text {
transform-origin: center; /* 或 100px 100px */
-webkit-animation: rotate 60s linear infinite;
animation: rotate 60s linear infinite;
}
@-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}遵循以上四步，即可彻底解决 Safari 下 SVG 旋转偏心抖动问题，确保动画在 iOS/macOS 全版本中稳定、居中、顺滑运行。
