我如何理解 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 = 旋转(r 是相对的，R 是绝对的)S/s = 比例(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 变换文档.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 上缩放 0，在 cx 32 周围缩放 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.

after 表示要在动画完成后设置的属性"值.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屋！