SVG中line元素旋转动画路径异常，多显示器表现不一致如何修复？

问题根源 #

1. 默认变换原点错误：SVG元素的transform-origin默认以元素边界盒中心为基准，直接旋转<line>/<path>会导致指针绕中心偏移，不符合仪表绕底部转动的需求。
2. 动画路径异常：若对线段的坐标属性（如x1/y1）添加过渡，浏览器会在动画过程中拉伸线段，产生异常路径；跨显示器表现差异则源于不同DPI缩放导致的边界盒计算偏差。

修复方案 #

1. 用<g>包裹指针，指定正确的变换原点

将指针元素（<line>/<path>）放入<g>容器，把旋转变换应用到容器上，同时明确设置变换原点为指针底部坐标。结合transform-box: fill-box确保原点计算基于元素自身填充区域，消除跨显示器差异：

<svg viewBox="0 0 200 200" width="100%">
  <!-- 仪表背景 -->
  <circle cx="100" cy="100" r="90" fill="#eee" stroke="#333" stroke-width="2"/>
  <!-- 包裹指针的容器 -->
  <g class="pointer" transform-origin="100 200">
    <line x1="100" y1="200" x2="100" y2="100" stroke="#f00" stroke-width="3"/>
  </g>
</svg>

.pointer {
  transition: transform 0.5s ease-in-out;
  transform-box: fill-box; /* 确保变换原点基于元素自身填充盒 */
}

/* 触发旋转的类 */
.pointer.rotate {
  transform: rotate(45deg); /* 按需调整目标角度 */
}

2. 仅对transform属性做过渡

避免直接对线段的坐标属性添加动画，仅通过transform: rotate()控制旋转。这种方式是纯粹的几何变换，不会产生线段拉伸的异常路径，且渲染更稳定。

3. 手动计算变换（兼容旧版浏览器）

若需兼容不支持transform-box的浏览器，可通过translate手动将旋转原点移至指针底部，再执行旋转：

.pointer.rotate {
  transform: translate(100px, 200px) rotate(45deg) translate(-100px, -200px);
}

效果验证 #

通过上述调整，指针会严格以底部坐标为原点旋转，动画过程中无异常路径，且在不同显示器上的表现一致，符合常规仪表的转动逻辑。

内容的提问来源于stack exchange，提问作者Neyo