Simulate Pivot Rotate Using Transform In SVG

Question

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

*
|
|
|

将旋转 -90 度到

*---

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

Answer 1

如果您使用SVG 变换属性而不是尝试使用 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一起使用，从 javascript 超时更改角度也可以正常工作。