SVG元素可以通过缩放，移动，倾斜和旋转来变换-类似HTML元素使用CSS transform来变换。然而，当涉及到坐标系时这些变换所产生的影响必然有一定差别。在这篇文章中我们讨论SVG的transform属性和CSS属性，包括如何使用，以及你必须知道的关于SVG坐标系变换的知识。

这是我写的SVG坐标系统和变换部分的第二篇。在第一篇中，包括了任何要理解SVG坐标系统基础的需要知道的内容；更具体的是， SVG viewport, viewBox 和 preserveAspectRatio 属性。

• 理解SVG坐标系和变换（第一部分）-viewport，viewBox，和preserveAspectRatio
• 理解SVG坐标系和变换（第二部分）-transform属性
• 理解SVG坐标系和变换（第三部分）-建立新视窗

这一部分我建议你先阅读第一篇，如果没有，确保你在阅读这篇之前已经读了第一篇。

transform属性值

tranform属性用来对一个元素声明一个或多个变换。它输入一个带有顺序的变换定义列表的<transform-list>值。每个变换定义由空格或逗号隔开。给元素添加变换看起来如下：

有效地SVG变换有：旋转, 缩放, 移动, 和倾斜。transform属性中使用的变换函数类似于CSS中transform属性使用的CSS变换函数，除了参数不同。

注意下列的函数语法定义只在transform属性中有效。查看section about transforming SVGs with CSS properties获取关于CSS变换属性中使用的语法信息。

Matrix

你可以使用matrix()函数在SVG元素上添加一个或多个变换。matrix变换语法如下：

上述声明通过一个有6个值的变换矩阵声明一个变换。matrix(a,b,c,d,e,f)等同于添加变换matrix[a b c d e f]。

如果你不精通数学，最好不要用这个函数。对于那些精通的人，你可以在这里阅读更多关于数学的内容。因此这个函数很少使用-我将忽略来讨论其他变换函数。

Translation

要移动SVG元素，你可以用translate()函数。translate函数的语法如下：

translate()函数输入一个或两个值得来声明水平和竖直移动值。tx代表x轴上的translation值；ty代表y轴上的translation值。

ty值是可选的，如果省略，默认值为0。tx和ty值可以通过空格或者逗号分隔，它们在函数中不代表任何单位-它们默认等于当前用户坐标系单位。

下面的例子把一个元素向右移动100个用户单位，向下移动300个用户单位。

上述代码如果以translate(100, 300)用逗号来分隔值的形式声明一样有效。

Scaling

你可以通过使用scale()函数变换来向上或者向下缩放来改变SVG元素的尺寸。scale变换的语法是：

scale()函数输入一个或两个值来声明水平和竖直缩放值。sx代表沿x轴的缩放值，用来水平延长或者拉伸元素；sy代表沿y轴缩放值，用来垂直延长或者缩放元素。

sy值是可选的，如果省略默认值等于sx。sx和sy可以用空格或者逗号分隔，它们是无单位值。

下面例子把一个元素的尺寸根据最初的尺寸放大两倍：

下列例子把一个元素缩放到最初宽度的两倍，并且把高度压缩到最初的一半：

上述例子使用逗号分隔的值例如scale(2, .5)仍然有效。

这里需要注意当SVG元素缩放时，整个坐标系被缩放，导致元素在视窗中重新定位，现在不用担心这些，我们会在下一节中讨论细节。

Skew

SVG元素也可以被倾斜，要倾斜一个元素，你可以使用一个或多个倾斜函数skewX 和 skewY。

函数skewX声明一个沿x轴的倾斜；函数skewY声明一个沿y轴的倾斜。

倾斜角度声明是无单位角度的默认是度。

注意倾斜一个元素可能会导致元素在视窗中重新定位。在下一节中有更多细节。

Rotation

你可以使用rotate()函数来旋转SVG元素。这个函数的语法如下：

rotate()函数对于给定的点和 旋转角度值执行旋转。不像CSS3中的旋转变换，不能声明除degress之外的单位。角度值默认无单位，默认单位是度。

可选的cx和cy值代表无单位的旋转中心点。如果没有设置cx和cy，旋转点是当前用户坐标系的原点（查看第一部分如果你不知道用户坐标系是什么。）

在函数rotate()中声明旋转中心点一个快捷方式类似于CSS中设置transform: rotate()和transform-origin。SVG中默认的旋转中心是当前使用的用户坐标系的左上角，这样也许你无法创建想要的旋转效果，你可以在rotate()中声明一个新的中心点。如果你知道元素在SVG画布中的尺寸和定位，你可以把它的中心设置为旋转中心。

下面的例子是以当前用户坐标系中的(50,50)点为中心进行旋转一组元素：

然而，如果你想要一个元素围绕它的中心旋转，你也许想要像CSS中一样声明中心为50% 50%；不幸的是，在rotate()函数中这样做是不允许的-你必须用绝对坐标。然而，你可以在CSS的transform属性中使用transform-origin属性。这篇文章后面会讨论更多细节。

坐标系变化

现在我们已经讨论了所有可能的SVG变换函数，我们深入挖掘视觉部分和对SVG元素添加每个变换的效果。这是SVG变换最重要的部分。因此它们被称为“坐标系统变换”而不仅仅是“元素变换”。

在这个说明中，transform属性被定义成两个在被添加的元素上建立新用户空间（当前坐标系）之一-viewBox属性是创建新用户空间的两个属性中的另一个。所以到底是什么意思呢？

这个行为类似于在HTML元素上添加CSS变换-HTML元素坐标系发生了变换，当你把变换组合使用时最明显。虽然在很多方面很相似，HTML和SVG的变换还是有一些不同。

主要的不同是坐标系。HTML元素的坐标系建立在元素自身智商。然而，在SVG中，元素的坐标系最初是当前坐标系或使用中的用户空间。

当你在一个SVG元素上添加transform属性，元素获取当前使用的用户坐标系的一个“副本”。你可以当做给发生变换的元素创建一个新“层”，新层上是当前用户坐标系的副本（the viewBox）。

然后，元素新的当前坐标系被在transform属性中声明的变换函数改变，因此导致元素自身的变换。这看起来好像是元素在变换后的坐标系中重新绘制。

要理解如何添加SVG变换，让我们从可视化的部分开始。下面图片是我们要研究的SVG画布。

code>属性和CSS属性，包括如何使用，以及你必须知道的关于SVG坐标系变换的知识。

这是我写的SVG坐标系统和变换部分的第二篇。在第一篇中，包括了任何要理解SVG坐标系统基础的需要知道的内容；更具体的是， SVG viewport, viewBox 和 preserveAspectRatio 属性。

• 理解SVG坐标系和变换（第一部分）-viewport，viewBox，和preserveAspectRatio
• 理解SVG坐标系和变换（第二部分）-transform属性
• 理解SVG坐标系和变换（第三部分）-建立新视窗

这一部分我建议你先阅读第一篇，如果没有，确保你在阅读这篇之前已经读了第一篇。

transform属性值

tranform属性用来对一个元素声明一个或多个变换。它输入一个带有顺序的变换定义列表的<transform-list>值。每个变换定义由空格或逗号隔开。给元素添加变换看起来如下：

有效地SVG变换有：旋转, 缩放, 移动, 和倾斜。transform属性中使用的变换函数类似于CSS中transform属性使用的CSS变换函数，除了参数不同。

注意下列的函数语法定义只在transform属性中有效。查看section about transforming SVGs with CSS properties获取关于CSS变换属性中使用的语法信息。

Matrix

你可以使用matrix()函数在SVG元素上添加一个或多个变换。matrix变换语法如下：

上述声明通过一个有6个值的变换矩阵声明一个变换。matrix(a,b,c,d,e,f)等同于添加变换matrix[a b c d e f]。

如果你不精通数学，最好不要用这个函数。对于那些精通的人，你可以在这里阅读更多关于数学的内容。因此这个函数很少使用-我将忽略来讨论其他变换函数。

Translation

要移动SVG元素，你可以用translate()函数。translate函数的语法如下：

translate()函数输入一个或两个值得来声明水平和竖直移动值。tx代表x轴上的translation值；ty代表y轴上的translation值。

ty值是可选的，如果省略，默认值为0。tx和ty值可以通过空格或者逗号分隔，它们在函数中不代表任何单位-它们默认等于当前用户坐标系单位。

下面的例子把一个元素向右移动100个用户单位，向下移动300个用户单位。

上述代码如果以translate(100, 300)用逗号来分隔值的形式声明一样有效。

Scaling

你可以通过使用scale()函数变换来向上或者向下缩放来改变SVG元素的尺寸。scale变换的语法是：

scale()函数输入一个或两个值来声明水平和竖直缩放值。sx代表沿x轴的缩放值，用来水平延长或者拉伸元素；sy代表沿y轴缩放值，用来垂直延长或者缩放元素。

sy值是可选的，如果省略默认值等于sx。sx和sy可以用空格或者逗号分隔，它们是无单位值。

下面例子把一个元素的尺寸根据最初的尺寸放大两倍：

下列例子把一个元素缩放到最初宽度的两倍，并且把高度压缩到最初的一半：

上述例子使用逗号分隔的值例如scale(2, .5)仍然有效。

这里需要注意当SVG元素缩放时，整个坐标系被缩放，导致元素在视窗中重新定位，现在不用担心这些，我们会在下一节中讨论细节。

Skew

SVG元素也可以被倾斜，要倾斜一个元素，你可以使用一个或多个倾斜函数skewX 和 skewY。

函数skewX声明一个沿x轴的倾斜；函数skewY声明一个沿y轴的倾斜。

倾斜角度声明是无单位角度的默认是度。

注意倾斜一个元素可能会导致元素在视窗中重新定位。在下一节中有更多细节。

Rotation

你可以使用rotate()函数来旋转SVG元素。这个函数的语法如下：

rotate()函数对于给定的点和 旋转角度值执行旋转。不像CSS3中的旋转变换，不能声明除degress之外的单位。角度值默认无单位，默认单位是度。

可选的cx和cy值代表无单位的旋转中心点。如果没有设置cx和cy，旋转点是当前用户坐标系的原点（查看第一部分如果你不知道用户坐标系是什么。）

在函数rotate()中声明旋转中心点一个快捷方式类似于CSS中设置transform: rotate()和transform-origin。SVG中默认的旋转中心是当前使用的用户坐标系的左上角，这样也许你无法创建想要的旋转效果，你可以在rotate()中声明一个新的中心点。如果你知道元素在SVG画布中的尺寸和定位，你可以把它的中心设置为旋转中心。

下面的例子是以当前用户坐标系中的(50,50)点为中心进行旋转一组元素：

然而，如果你想要一个元素围绕它的中心旋转，你也许想要像CSS中一样声明中心为50% 50%；不幸的是，在rotate()函数中这样做是不允许的-你必须用绝对坐标。然而，你可以在CSS的transform属性中使用transform-origin属性。这篇文章后面会讨论更多细节。

坐标系变化

现在我们已经讨论了所有可能的SVG变换函数，我们深入挖掘视觉部分和对SVG元素添加每个变换的效果。这是SVG变换最重要的部分。因此它们被称为“坐标系统变换”而不仅仅是“元素变换”。

在这个说明中，transform属性被定义成两个在被添加的元素上建立新用户空间（当前坐标系）之一-viewBox属性是创建新用户空间的两个属性中的另一个。所以到底是什么意思呢？

这个行为类似于在HTML元素上添加CSS变换-HTML元素坐标系发生了变换，当你把变换组合使用时最明显。虽然在很多方面很相似，HTML和SVG的变换还是有一些不同。

主要的不同是坐标系。HTML元素的坐标系建立在元素自身智商。然而，在SVG中，元素的坐标系最初是当前坐标系或使用中的用户空间。

当你在一个SVG元素上添加transform属性，元素获取当前使用的用户坐标系的一个“副本”。你可以当做给发生变换的元素创建一个新“层”，新层上是当前用户坐标系的副本（the viewBox）。

然后，元素新的当前坐标系被在transform属性中声明的变换函数改变，因此导致元素自身的变换。这看起来好像是元素在变换后的坐标系中重新绘制。

要理解如何添加SVG变换，让我们从可视化的部分开始。下面图片是我们要研究的SVG画布。