html svg 移动缩放,SVG缩放，移动，倾斜和旋转变换

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

#FormatImgID_0#

SVG系列教程

transform属性值

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

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

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

Matrix

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

matrix()

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

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

Translation

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

translate([])

tran