如何使SVG指针组件绕自身轴线旋转？

问题描述 #

我希望让SVG组件中的指针绕自身轴线旋转，但尝试了下述方法后并未实现预期效果，请问该如何解决？

尝试的代码如下：

<g id="Group 1" transform = "translate(100, 100) rotate(45 0 0)">
<path id="Point" fill-rule="evenodd" clip-rule="evenodd" d="M302.248 291.371L230.862 209.521L212.309 230.492L302.248 291.371Z" fill="#72A1E7"/>
</g>

问题原因 #

当前旋转以(0,0)为中心，但指针自身的几何中心不在该点，且translate与rotate的执行顺序错误，导致旋转后位置偏移，无法呈现绕自身轴线旋转的效果。

解决步骤与代码示例 #

方法一：调整transform顺序与中心偏移 #

1. 计算指针path的几何中心（取三个顶点坐标的平均值）：
   • 顶点坐标：(302.248,291.371)、(230.862,209.521)、(212.309,230.492)
   • 中心坐标：((302.248+230.862+212.309)/3, (291.371+209.521+230.492)/3) ≈ (248.473, 243.795)
2. 先将指针平移至中心对齐原点，再执行旋转，最后通过外层translate定位到目标位置：

<g id="Group 1" transform="translate(100, 100)">
  <path id="Point" 
        transform="translate(-248.473, -243.795) rotate(45)" 
        fill-rule="evenodd" clip-rule="evenodd" 
        d="M302.248 291.371L230.862 209.521L212.309 230.492L302.248 291.371Z" 
        fill="#72A1E7"/>
</g>

方法二：重新绘制path到原点中心 #

直接调整path的坐标，让指针的几何中心落在原点，这样旋转时无需额外偏移：

<g id="Group 1" transform="translate(100, 100) rotate(45)">
  <path id="Point" 
        fill-rule="evenodd" clip-rule="evenodd" 
        d="M53.775 47.576L-17.631 -44.274L-36.184 -23.303L53.775 47.576Z" 
        fill="#72A1E7"/>
</g>

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