如何理解snap.svg中的转换属性？

Question

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

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

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

我猜s代表规模，那么animAfter和after的区别是什么呢？我是SVGs的新手。

Answer 1

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

编辑: Snap现在不区分大写/小写，所以这部分不会有什么不同(也许值得注意，以防你看到一些Raphael.js代码并想要理解)，其余部分应该仍然相关...

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

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

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

t-10 0 s0 32 32会平移x，y -10,0，然后缩放x，y，cx，cy，所以在x上缩放0，在cx。

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

after表示动画结束后要设置的"attribute“值。animafter表示动画结束后要设置的“动画”值。

Answer 2

Snap似乎使用与raphael相同的语法。T是平移的，所以这是x的平移-10个单位。s是比例，r是旋转。