在 SVG 中使用变换模拟枢轴旋转

我在 SVG 中有一个矩形，需要从特定点绕轴旋转。我能想到的最好方法是变换到枢轴的 xy，旋转角度，然后再次变换。问题是第二个变换的 xy 。我认为它会在某种程度上采用 cos 和 sin，只是不确定在哪里或为什么。

*
|
|
|

会旋转-90度到

*---

也许我以错误的方式看待这个问题，有人可以澄清吗？

如果您使用SVG 变换属性 http://www.w3.org/TR/SVG/coords.html#TransformAttribute您不需要尝试自己使用 javascript 进行编码，您所需要做的就是以 (0, 0) 作为枢轴将形状居中。

例如，在下面的示例中，路径中初始圆弧的中心位于原点。动画应用于该元素，因此它看起来在原地旋转，而圆圈静止。包含组上的平移将旋转的中心点移动到图像的中心。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
    <g transform="translate(32, 32)" stroke="navy" fill="none">
        <path d="M -1 1.732 a 2 2 0 1 1 2 0 v 24 a 1 1 0 0 1 -2 0 Z">
            <animateTransform attributeName="transform" type="rotate"
                from="0" to="360" dur="1s" repeatDur="indefinite"/>
        </path>
    </g>
</svg>

唯一的计算是 1.732 来获取圆心，变换矩阵处理角度。请注意，您不必使用SMIL 与 SVG http://www.w3.org/TR/SVG/animate.html#Animation.class，从 javascript 超时更改角度也可以正常工作。