SVG 中的 默认以左上角为旋转原点，直接应用 transform: rotate(90deg) 会导致图形移出视口；需显式设置 transform-origin: center 将旋转中心锚定在圆心位置，才能实现预期的原地旋转效果。

svg 中的 `` 默认以左上角为旋转原点，直接应用 `transform: rotate(90deg)` 会导致图形移出视口；需显式设置 `transform-origin: center` 将旋转中心锚定在圆心位置，才能实现预期的原地旋转效果。

在 SVG 中对 等形状元素应用 CSS transform（如 rotate()）时，一个常见误区是忽略旋转原点（transform origin）的默认行为。与 HTML 元素不同，SVG 元素的 transform-origin 默认值并非 center，而是 0 0（即 viewBox 的左上角）。因此，当你为 添加 style="transform: rotate(90deg)" 时，浏览器实际是以 (0, 0) 为支点旋转整个圆形——这会使圆心从 (100, 100) 绕原点逆时针转 90°，最终坐标变为 (-100, 100)，大幅偏移出 viewBox="0 0 200 200" 可见区域，造成“元素消失”的假象。

✅ 正确做法是显式声明旋转中心与圆心一致：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewbox="0 0 200 200"><circle cx="100" cy="100" r="90" stroke="red" stroke-width="20" stroke-dasharray="565.4866776461628" stroke-dashoffset="441.079608564007" stroke-linecap="round" style="transform: rotate(90deg); transform-origin: center;"></circle></svg>

⚠️ 注意事项：

• transform-origin: center 等价于 transform-origin: 50% 50%，在 SVG 中会相对于元素自身的边界框（bounding box）计算——而 的边界框恰好是以 (cx, cy) 为中心、宽高均为 2r 的正方形，因此 center 能精准对齐圆心；
• 不推荐使用 transform-origin: 100px 100px 等绝对值，因其依赖具体坐标且不易维护；
• 若需兼容旧版 Safari（
• 动画场景中，务必确保 transform-origin 在关键帧或过渡前已稳定生效，避免因样式层叠导致旋转抖动。

总结：CSS transform 在 SVG 中完全可用，但必须配合正确的 transform-origin 才能实现直观、可控的几何变换。将 transform-origin: center 作为 SVG 形状旋转的标配，是保障可维护性与跨浏览器一致性的关键实践。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！