使用SVG中的变换来模拟枢轴旋转 [英] Simulate Pivot Rotate Using Transform In SVG

问题描述

我在SVG中有一个矩形，我需要从一个特定点旋转到一个枢轴。我可以看到这样做的最好的方法是转换到xy的枢轴，旋转度，然后再次转换。问题是第二个变换的xy。我假设它在某种程度上承担cos和sin，只是不知道在哪里或为什么。

I have a rectangle in SVG that I need to rotate on a pivot from a specific point. The best way I can see to do this is transform to the xy of the pivot, rotate the degree, and then transform again. The problem is the xy of the second transform. I assume its going to take cos and sin to some extent, just not sure where or why.

*
|
|
|

将旋转-90度到

*---

如果您使用

Maybe im looking at this the wrong way, can anyone clearify?

推荐答案

SVG / coords.html＃TransformAttributerel =nofollow noreferrer> SVG transform属性，而不是试图用javascript来自己编码，所有你需要做的是将你的形状以（0，0）为中心。

If you use the SVG transform attribute rather than trying to code it yourself with javascript, all you need to do is center your shape with (0, 0) as the pivot.

例如，在下面的示例中，路径中初始弧的中心在原点。动画适用于该元素，所以它似乎旋转到位，圆圈固定。包含组中的翻译将旋转的中心点移动到图片中心。

For instance, in the example below, the center of the initial arc in the path is at the origin. The animation applies to that element, so it appears to spin in place, with the circle stationary. The translation on the containing group moves the center point of the rotation to the center of the image.

<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 with SVG ，从javascript超时改变角度也很好。

The only calculation there is the 1.732 to get the center of the circle, the transformation matrix handles the angles. Note, you don't have to use SMIL with SVG, changing the angle from a javascript timeout works fine too.

这篇关于使用SVG中的变换来模拟枢轴旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！