Question

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

在以下示例代码中，数字的含义是什么？

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

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

Answer 1

变换格式是一个变换序列的字符串，因此您可以互相拥有多个变换格式。

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

T / t =翻译（t是相对的，T是绝对的） R / r =旋转（r是相对的，R是绝对的） S / s =标度（s是相对的，S是绝对的）

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

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

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

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

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

Answer 2

Snap似乎使用与raphael相同的语法。 t是平移的，因此在x中翻译-10个单位。 s是刻度，r是旋转。