我如何理解snap.svg中的Transform属性？ [英] How do I understand Transform properties in snap.svg?

问题描述

我一直在尝试学习snap.svg，我对转换属性有些怀疑。我的问题非常愚蠢，但这里是

I have been trying to learn snap.svg and I have some doubts regarding the transform properties. My question is pretty stupid but here it is

在下面的示例代码中，这些数字是什么意思？

In the following sample code, what do the the numbers mean?

     {"transform" : "t-10 0 s0 32 32"}
     {"transform" : "r180 32 32"}

我猜s代表规模，animAfter和after之间有什么区别？我是SVG的新手。

I am guessing that s stands for scale, Also what is the difference between animAfter and after? I am very new to SVGs.

推荐答案

转换格式是一个字符串，它是一系列变换，因此你可以互相拥有几个。

The transform format is a string that is a sequence of transforms, so you can have several after each other.

编辑：Snap这些天没有对大小写区分，所以这部分没有区别（可能值得注意一下，如果你看到一些Raphael.js代码并且想要了解），其余的应该仍然是相关的...

T / t =翻译（ t是相对的，T是绝对的）
R / r = rotate（r是相对的，R是绝对的）
S / s = scale（s是相对的，S是绝对的）

T/t = Translate (t is relative, T is absolute) R/r = rotate(r is relative, R is absolute) S/s = scale(s is relative, S is absolute)

值得关注 Raphael转换文档 Snap.svg没有足够的信息，因为有很多重叠。

Its worth looking at the Raphael transform documentation if the Snap.svg doesn't have enough information, as there is a lot of overlap.

对于转换，有些人会引用一个原点来旋转哪个/规模等，有时候你可能希望原点中心是对象本身，有时是0,0，有时是特定点。

For transformations, some will reference a 'centre of origin' about which to rotate/scale etc, as sometimes you may want the centre of origin to be the object itself, sometimes 0,0, sometimes around a specific point.

t-10 0 s0 32 32 将翻译x，y -10,0，然后缩放x，y，cx，cy，因此在x，32上的缩放0，在cx 32周围的路上。

t-10 0 s0 32 32 would translate x,y -10,0 and then scale x,y,cx,cy so scale 0 on the x, 32 on the way around cx 32.

r180 32 32 将绕点32,32旋转180度。您通常可以使用逗号或空格来分隔值。

r180 32 32 would rotate 180 degrees around point 32,32. You can normally use a comma or space to separate values.

表示动画结束后设置的属性值。 animafter表示动画结束后要设置的动画值。

after represents "attribute" values to set after the animation finishes. animafter represents "animation" values to set after the animation finishes.

这篇关于我如何理解snap.svg中的Transform属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！