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

Question

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

*
|
|
|

会旋转-90度到

*---

也许我看错了，谁能澄清一下？

Answer 1

如果您使用 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 也可以正常工作。