坐标变换与动画 - SVG从入门到起飞【4-1】

前面已经讲了SVG的基本形状，今天说说形状的坐标变换，即transfrom属性。
以多边开polygon为例，假如你辛苦的通过计算及各种工具的使用在页面上绘制出了一个心形，并把它做成了网站，打算以此来向你心中的TA表白。

image

突然你觉得一个静止的心不足以表达你的心动，所以你想让它动起来，让它放大、缩小、跳动、奔跑、旋转等等，你会怎么做？
当然，直接计算出polygon每个动作的points是可以的，但显然过于复杂与困难，这时就需要使用transform属性通过对坐标系的改变来达到这些效果。transform中可以包含的内容有：

• translate(x, y)

  位移，在水平与垂直方向上移动指定的距离，y在不指定时默认为0

• rotate(a, x, y)

  旋转，以(x, y)为锚点旋转a度，单位是角度（不是弧度），x、y在不指定时默认为0，即默认围绕原点旋转

• scale(x, y)

  缩放，在水平与垂直方向缩放指定的倍数，y在不指定时默认与x相同

• skewX(a)

  水平方向倾斜（压缩），在x轴方向上倾斜a度

• sckwY(a)

  垂直倾斜（压缩），在y轴方向上倾斜a度

• matrix(a,b,c,d,e,f)

  矩阵变换，通用的变换方法，利用它可以实现上面的每种变换，它用一个矩阵来表示，如果你数学水平够好的话，欢迎使用

注意，所有变换都是对形状的整体坐标系的改变，并且是相对于形状的父元素的坐标系的改变。

下面我们先利用这些变换“蹂躏“一下这颗心

变换实例

来看看这个心在SVG里原始的样子

image

绿色坐标是心形 polygon的坐标系，由于 polygon的父元素就是 svg，所以默认情况下它的原点就在SVG的坐标系的原点上。

translate

translate很简单，就是沿着X轴与Y方向移动

image

(坐标的数字用空格或逗号分隔都可以)

rotate

rotate允许以指定的坐标为中心（锚点）进行旋转。
在不指定中心点坐标时默认以原点为中心，比如旋转15度是这个样子的

image

指定一个坐标点(200，125)为中心旋转15度是这样的

image

scale

scale也很简单，以坐标原点为中心放大（值大于1）或缩小（值小于1）指定的倍数

image

skewX

以坐标原点为中心，把Y轴向X倾斜指定的角度，有种”压扁“的感觉。
比如我们把心形向X轴压扁30度

image

skewY

以坐标原点为中心，把X轴向Y轴倾斜指定的角度，与上面的skewX相对应。
我们把心形向Y轴压扁30度是这样的

image

matrix

这个我们这里就不细说了，它使用矩阵的方式表示变换，可以实现上面每一种变换，但从直观感受上来讲并不好理解，所以还是建议使用上面语义化的表达方式。

变换组合

上面所有的变化都是能够叠加使用的，但需要注意一点，就是变换的顺序。不同的变换顺序会有不同的结果，为什么？因为每一次变换是对坐标系的改变，当坐标系改变后，以后的变换就是按照新的坐标系来改变了，所以自然的变换顺序的不同就会有不同的结果。
以最常用的translate与rotate为例，简单起见我们只进行X轴方向的移动。

• 先位移，再旋转

image

心形的坐标系先在X轴方向移动100，然后再以原点为中心旋转30度

• 先旋转，再移动

image

心形的坐标系先以原点为中心旋转30度，然后再向 旋转后 的坐标系的X轴方向移动100

所以我们可以根据需要，用不同的变换顺序来实现目标，有时一个适当的变换顺序可以让自己少计算很多东西。

好了，我们已经把心蹂躏过了，那怎么让它“跳动”起来呢？这个……我们留待下一篇再讲。

---

如果你觉得文章有用，就分享给你的小伙伴吧

---

微信公众号同步更新，欢迎扫码关注

var_web