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 不一致：
-
transform-origin: 50% 50%在 Safari 中可能失效：尽管符合标准，但旧版 Safari（特别是 iOS Safari ≤15.6）对 SVG 内transform-origin百分比值的解析不稳定，尤其当<svg></svg>未显式设置width/height或viewBox存在缩放时，百分比基准易被误判为视口而非 SVG 画布自身。 -
transform-origin: center更可靠：该关键字在 IE9+ 及所有现代 Safari 中均被正确映射为50% 50%，且语义明确、无单位歧义，是 SVG 旋转场景的首选写法。 -
绝对坐标兜底方案：若仍异常，可直接使用像素值——因示例中
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 旋转“离心抖动”问题，实现跨浏览器一致、流畅的圆形文字与图标动画效果。
