javascript - 如何理解 snap.svg 中的 Transform 属性？

Question

我一直在尝试学习 snap.svg，但我对变换属性有一些疑问。我的问题很愚蠢，但就是这样

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

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

我猜s代表scale，另外animAfter和after有什么区别？我对 SVG 还很陌生。

Answer 1

转换格式是一个字符串，它是一系列转换，因此您可以有多个转换。

编辑:现在 Snap 不区分大小写，因此这部分没有什么区别(不过，如果您看到一些 Raphael.js 代码，也许值得注意这一点)并且想理解)，但其余的应该仍然相关......

T/t = 平移(t 是相对的，T 是绝对的)R/r = 旋转(r 是相对的，R 是绝对的)S/s = 比例(s 是相对的，S 是绝对的)

值得一看Raphael transform documentation如果 Snap.svg 没有足够的信息，因为有很多重叠。

对于变换，有些会引用围绕其旋转/缩放等的“原点中心”，因为有时您可能希望原点中心是对象本身，有时是 0,0，有时围绕特定点。

t-10 0 s0 32 32 会将 x,y -10,0 转换，然后缩放 x,y,cx,cy，以便在 x, 32 上围绕 cx 32 缩放 0 .

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

after 表示动画结束后要设置的“属性”值。 animafter 表示动画完成后要设置的“动画”值。