SVG 元素默认以左上角为旋转原点，直接对 应用 transform: rotate(90deg) 会导致其绕 (0,0) 旋转而移出视口；需显式设置 transform-origin: center（或等价的 50% 50%）使其绕自身中心旋转。

svg 元素默认以左上角为旋转原点，直接对 `` 应用 `transform: rotate(90deg)` 会导致其绕 (0,0) 旋转而移出视口；需显式设置 `transform-origin: center`（或等价的 `50% 50%`）使其绕自身中心旋转。

在 SVG 中对图形元素（如 ）应用 CSS transform 时，一个常见误区是忽略变换原点（transform origin） 的默认行为。与 HTML 元素不同，SVG 元素的 transform 默认以坐标系原点 (0, 0) 为旋转中心，而非元素自身的几何中心。因此，当你为圆心位于 (100, 100)、半径为 90 的 添加 style="transform: rotate(90deg)" 时，它实际绕 SVG 左上角 (0, 0) 逆时针旋转 90°，导致整个圆被旋转至视口外——视觉上“消失”。

✅ 正确做法是：显式指定 transform-origin 为元素中心。由于该圆的 cx="100"、cy="100"，且 SVG 的 viewBox="0 0 200 200"，其自然中心即为 (100, 100)，可安全使用：

<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;"
  />
</svg>

? 提示：transform-origin: center 是 50% 50% 的简写，在 SVG 中语义清晰且兼容性良好（Chrome/Firefox/Safari/Edge 均支持）。若需更精确控制，也可写作 transform-origin: 100px 100px。

⚠️ 注意事项：

立即学习“前端免费学习笔记（深入）”；

• 不要将 transform 应用于
• transform-origin 必须与 transform 同时声明在目标元素上，且需确保该元素已具有明确的渲染尺寸（本例中由 cx/cy/r 和 viewBox 共同定义）；
• 若使用 SVG 内联样式（如本例），请确保浏览器支持 SVG 2 的 CSS transform 特性（现代主流浏览器均已支持）；
• 替代方案：使用 SVG 原生 transform 属性（如 transform="rotate(90 100 100)"），但该方式不支持 CSS 动画和变量，灵活性较低。

总结：旋转 SVG 图形的关键在于明确定义旋转中心。添加 transform-origin: center 即可让 rotate() 按预期绕元素中心生效，这是实现可维护、可动画化 SVG 变换的最佳实践。