Svg学这些就够了

上一节《Svg学这些就够了-组合复用（一）》我们学习了svg的组合复用，一次定义就可以在图中任意引用了，不过如果只是简单引用未免太就小看svg的功能了，再组合复用的基础上，我们本节详细介绍下svg的transform属性功能，这个属性非常强大。

tranform属性用来对一个元素声明一个或多个变换。它输入一个带有顺序的变换定义列表的值。每个变换定义由空格或逗号隔开。有效地SVG变换有：平移、缩放、旋转,、倾斜。transform属性中使用的变换函数类似于CSS中transform属性使用的CSS变换函数，除了参数不同。

1.平移

平移translate(x,y)，在原有坐标的位置的基础上，在二维平面上沿X轴、Y轴移动，平移后针对该图形做缩放或旋转时的坐标参考系是以平移的坐标为原点的，这个后面讲到缩放旋转时会说明。平移的示例如下：

画布大小为400*400，单元图案的大小为100*100，将单元图案平移到画布的各个位置组成该图，源码如下：

2.缩放

缩放scale(x,y)，针对单元图案，在X轴、Y轴上按比例缩放，x,y的缩放的比例，示例如下：

为了说明缩放里的镜像翻转，找了一个不是对称图形的图案【蜗牛】，如下：

第1张图的缩放比例为scale(-1,1)效果为原图的x轴翻转

第2张图在scale(2,1)效果为x轴方向放大2倍

第7张为原图，缩放比例1:1， 其他图片以此类推，完整的源码如下：

注意：在上述缩放中示例中，我们都是先平移到某个位置后再缩放，缩放也是基于平移后的位置来缩放的，平移后单位图案的左上角为平移坐标点translate(x,y)，以此为原点，对单位图案进行XY轴的缩放，如果缩放系数为正，则向右向下缩放，如果为负，则向相反方向缩放。

3.旋转

旋转函数rotate(d,cx,cy)对于给定的点(x,y)和旋转角度(d)值执行旋转。角度值默认单位是度。可选的cx和cy值代表旋转中心点。如果没有设置cx和cy，旋转点是当前用户坐标系的原点。示例如下：

第1个格子的图为单元图案原图，旋转角度为0

第2个格子的图旋转角度为45度

为什么旋转45度是往这个方向呢，好像和我们的常识不一致，应该逆时针才对啊，这要从电脑或者图片的坐标系说起，X轴方向向右，Y轴方向向下，和我们在数学上学的Y轴向上不一样，这就导致了旋转方向不一样了。

其他的旋转图案建下面的源码，中间的为3个图案旋转叠加，后面的图案会把前面的覆盖。

4.倾斜

SVG元素也可以被倾斜，要倾斜一个元素，你可以使用一个或多个倾斜函数skewX 和 skewY，函数skewX声明一个沿x轴的倾斜；函数skewY声明一个沿y轴的倾斜。倾斜函数的参数单位是角度。

第1个格子的图为沿X轴方向倾斜45度

第3个格子的图为沿Y轴方向倾斜45度

沿哪个方向倾斜，哪个方向的坐标就会改变，比如沿X轴倾斜，x坐标改变，y坐标不变，上图的源码如下：

5.小结

在运用平移，缩放和旋转这些变换组合时，要遵循一个先后原则：平移-->缩放-->旋转-->倾斜，如果顺序不对，有时候调整就会很麻烦，往往看这坐标没问题就是不知道图片飞哪里去了，看不到影子。

综合运用平移、缩放和旋转，可以构造出丰富的svg图片，如下所示：

Svg还有不少有趣和实用的功能，敬请期待下篇。

本篇涉及的svg源码：svg_demo.zip