Safari 对 SVG 元素的 transform-origin 解析存在兼容性差异，常导致旋转中心偏移、出现“绕左上角甩动”现象；本文系统梳理根本原因，并提供跨版本稳定生效的修复方案。
safari 对 svg 元素的 `transform-origin` 解析存在兼容性差异，常导致旋转中心偏移、出现“绕左上角甩动”现象；本文系统梳理根本原因，并提供跨版本稳定生效的修复方案。
在 Safari（尤其是 iOS 15.6 及更早版本）中，SVG 内部元素使用 transform: rotate() 配合 @keyframes 动画时，若仅设置 transform-origin: 50% 50%，极易出现旋转中心严重偏移——即所谓 “off-center wobble”。这不是 CSS 写法错误，而是 Safari 对 SVG 坐标系与 transform-origin 单位解析的特殊行为所致。
? 根本原因分析
SVG 的
transform-origin默认基准不同：
普通 HTML 元素以自身盒模型为参考，而 SVG 元素（尤其<path></path>、<text></text>、<g></g>等）的transform-origin在 Safari 中可能默认回退到0 0（左上角），尤其当未显式声明单位或未匹配 viewBox 坐标系时。50% 50%在 Safari 中不稳定：
尽管规范支持百分比，但旧版 Safari（≤15.6）对 SVG 内transform-origin: 50% 50%的解析常失效，尤其在嵌套<textpath></textpath>或复杂<g></g>结构中，会忽略百分比含义，直接按像素坐标处理或完全降级。center是更可靠的替代值：transform-origin: center是 CSS Level 4 标准语法，Safari 自 iOS 12.2 起已稳定支持，且语义明确——始终指向元素几何中心，不依赖 viewBox 缩放或父容器尺寸，兼容性远优于50% 50%。
✅ 推荐修复方案（三重保障）
1. 优先使用 transform-origin: center
.link__cloud,
.link__text {
transform-origin: center; /* ✅ 强烈推荐 —— 简洁、语义清晰、Safari 兼容性最佳 */
animation: rotate normal infinite 60s linear;
}⚠️ 注意：
center必须单独书写，不可写作center center或center 50%，否则 Safari 可能降级为0 0。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries下载规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
2. 备选方案：显式像素坐标（精确可控）
若项目需支持极老 Safari（如 iOS 9–11），可结合 viewBox 尺寸硬编码：
/* viewBox="0 0 200 200" → 中心为 (100px, 100px) */
.link__cloud,
.link__text {
transform-origin: 100px 100px; /* ✅ 绝对可靠，无单位歧义 */
}3. 关键配套：补全 @keyframes 并统一单位
避免 Safari 因关键帧缺失起始态而重置旋转：
@keyframes rotate {
from { transform: rotate(0deg); } /* 必须显式声明 from */
to { transform: rotate(360deg); } /* 单位统一为 deg，禁用 rotate(360) */
}
@keyframes rotateReverse {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}? 必须规避的陷阱
- ❌ 禁用
transform-origin: 50% 50%（Safari 中 SVG 场景下高风险） - ❌ 省略
from关键帧（旧 Safari 无法推导起点，首圈跳变） - ❌ 混用单位（如
rotate(0)vsrotate(360deg)） - ❌ 在
@keyframes中使用 CSS 变量（iOS Safari ≤15.6 完全忽略整个@keyframes块）
? 验证建议
- 在真机 Safari（iOS 15.4/15.6/16.0）及 macOS Monterey Ventura 上测试
- 使用 Webkit Bug Tracker 检索
transform-origin svg确认已知 issue 状态 - 生产环境建议添加
-webkit-transform-origin: center;（虽非必需，但增强兼容冗余）
? 终极提示：对于 SVG 动画，
transform-origin: center+from/to显式关键帧 +deg单位 是目前 Safari 兼容性最高、维护成本最低的黄金组合。无需 polyfill，纯 CSS 即可一劳永逸解决 off-center wobble 问题。
