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