SVG的transform

SVG的transform

transform属性定义了应用于元素和元素的子元素的变换定义的列表。变换列表中的项目由空格和/或逗号分隔，并从右到左应用。 SVG的transform属性中的所有函数的参数只能是纯数字，比如说，我们不能在translate函数中使用%单位（虽说在火狐浏览器中的CSS transform属性也不能使用—此处有链接—），rotate，skew角度只能使用deg单位，我们能在CSS transform属性中可以使用的所有其它单位在这里都不能使用。

注：火狐浏览器现在已经支持transform-origin上应用带有%的值，不过与chorme不同的是，火狐的%是相对于svg画布而不是元素自身。 SVG元素和HTML元素工作方式的差异，主要是由元素坐标系的不同造成的。无论是HTML元素还是SVG元素，都有一个自己的坐标系。对于HTML元素，初始的坐标原点在元素的中心。对于SVG元素，其坐标系原点是在SVG画板的（0，0）处（假设在SVG标签内祖先元素和自身都不存在任何变换）。如果SVG元素的中心点不在画板的(0,0)点，像rotate,scale或者skew这些变换的结果，都会与HTML元素上应用的结果大不一样。

translate transform: HTML 元素 (左边) vs SVG 元素 (右边)

上面的图片展示了当translate分别应用到HTML元素和SVG元素上的区别。

正如我们看到的，它们的区别在于各自坐标系的位置。HTML元素的坐标原点在自身50% 50%处，SVG元素的坐标原点在SVG画布0 0处，不过无论坐标原点处在什么位置，它们最后呈现的效果都是一样的。

对于HTML和SVG元素，我们都可以在 CSS transform 中使用3种2D的位移函数：translateX(tx),translateY(ty)和translate(tx[, ty])。前两个分别作用在 X方向 和 Y方向(相对于元素自身的坐标系)。需要注意的是，如果在translate之前存在另外的变换，X方向，Y方向就可能不再代表着水平方向，垂直方向。而第三个位移函数则同时在x,y方向上分别移动tx,ty个单位，ty是可选的，如果不明确指定，默认是0。

SVG元素除了CSS tranform属性，还有SVG tranform属性。在这个例子中，我们在tranform属性中只定义了translate，SVG属性中可以使用逗号分隔，或者空格分隔，其中1代表着1px，下面的两种为SVG元素应用位移的方式是等价的：

使用CSS transform:

连续的translate()将会被相加在一起，比如我们可以书写一个与translate(tx1 + tx2, ty1 + ty2)等价的链式写法translate(tx1, ty1) translate(tx2, ty2)，注意，这种等价关系只有当两个translate()之间没有任何其它的转换的情况下成立。从translate(tx, ty)返回到初始状态，应用translate(-tx, -ty)即可。

transform转换

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。转换是使元素改变形状、尺寸和位置的一种效果。

语法：transform: none|transform-functions;

2D 转换方法：

• translate()
• rotate()
• scale()
• skew()
• matrix()