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

我在SVG中有一个矩形，需要从特定点绕枢轴旋转。我可以看到的最好方法是将其转换为枢轴的xy，旋转度数，然后再次进行转换。问题是第二次变换的xy。我认为它在某种程度上会承担起因和责任，只是不确定在哪里或为什么。

*
|
|
|

将旋转-90度

*---

也许我看错了方向，有人可以澄清吗？

最佳答案

如果您使用SVG transform attribute而不是尝试使用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，变换矩阵处理 Angular 。请注意，您不必使用SMIL with SVG，从javascript超时更改 Angular 也可以正常工作。

关于javascript - 在SVG中使用变换模拟枢轴旋转，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/2437542/