我一直在尝试学习 snap.svg，但我对变换属性有一些疑问。我的问题很愚蠢，但在这里
在下面的示例代码中，这些数字是什么意思？
{"transform" : "t-10 0 s0 32 32"}
{"transform" : "r180 32 32"}
我猜 s 代表比例，还有 animAfter 和 after 之间的区别是什么？我对 SVG 很陌生。
问问题
21001 次
2 回答
51
转换格式是一个字符串，它是一系列转换，因此您可以有多个转换。
编辑：Snap 现在不区分大写/小写，所以这部分没有区别（尽管可能值得了解，以防你看到一些 Raphael.js 代码并想理解），其余的应该仍然是相关的......
T/t = 平移（t 是相对的，T 是绝对的） R/r = 旋转（r 是相对的，R 是绝对的） S/s = 缩放（s 是相对的，S 是绝对的）
如果 Snap.svg 没有足够的信息，则值得查看Raphael 变换文档，因为有很多重叠。
对于转换，有些会引用一个“原点中心”来旋转/缩放等，因为有时您可能希望原点中心是对象本身，有时是 0,0，有时是围绕特定点。
t-10 0 s0 32 32将平移 x,y -10,0 然后缩放 x,y,cx,cy 因此在 x 上缩放 0，在 cx 32 附近缩放 32。
r180 32 32将围绕点 32,32 旋转 180 度。您通常可以使用逗号或空格来分隔值。
after 表示动画结束后要设置的“属性”值。animafter 表示动画完成后要设置的“动画”值。
于 2013-11-30T21:42:59.613 回答
4
Snap 似乎使用与raphael相同的语法。t 是平移，因此在 x 中平移 -10 个单位。s 是缩放，r 是旋转。
于 2013-11-30T21:33:21.047 回答