SVG进阶-坐标与变换

transform

---

svg 中的transform可以写在属性中,也可以写在css中，写在css中要遵循css的规则，在这里就不详细去介绍了，这里主要介绍一下svg的transform属性。

svg的transform属性包括：位移translate, 旋转rotate, 缩放scale, 斜切skew以及直接矩阵matrix. 但只局限于2D层面的变换。SVG似乎只支持二维变换（若有不对，欢迎指正），且类似translateX, rotateX也都是不支持的。

css中transform其坐标是相对于当前元素而言的，默认是元素的中心点变换，我们可以通过transform-origin属性改变变换的中心点。而SVG中的transform的坐标变换的是相对于画布的左上角计算的，跟css的transform差别较大。

transform translate位移

---

SVG元素使用CSS3的transform进行变换，也只支持2D层面的几个属性，例如translateX(tx), translateY(ty)以及translate(tx[, ty])而translateZ(tz)则并不支持。

如果我们使用SVG元素自带的transform属性进行变换，则仅支持translate(tx[ ty])这种用法（缺省使用0代替），当多个参数值的时候，可以使用逗号,或者直接空格分隔，但是不能包含单位。

错误写法：

transform="translate(30px 12px)

正确写法：

transform="translate(30 12)"        
transform="translate(30, 12)" 

和CSS3的transform一样，SVG中的translate位移也是支持多声明累加的。例如：

transform="translate(30 12) translate(30 12)"

等同

transform="translate(60 24)"

需要注意的是，俩个translate中间不要混有其他的transform变换。否则，最终的位移就不是简单的相加了。

transform rotate旋转

---

<rect x="200" y="50" width="120" height="90" rx="10" ry="10" fill="red"></rect>
<rect x="200" y="50" width="120" height="90" rx="10" ry="10" fill="#a0b3d6" transform="rotate(45)"></rect>

效果好像跟我们平时用的css3效果不一样。到底是发生了什么呢？

这是因为SVG元素的默认是SVG左上角为中心变换，那不是做不到围绕自己旋转吗？先别急，我们来看一看这个rotate的具体语法。

SVG中的属性transform旋转同样是没有单位？哦，别逗了，不是没有单位，是单位默认是角度deg且不能修改，例如：

transform=“rotate(45)” 具体语法为：rotate(angle[ x y]). 大家注意到没有，这里有个[ x y], []表示这个可选参数。也就是说，SVG中的rotate旋转比CSS的rotate多了一个可选参数，那这个可选参数[ x y]表示什么意思呢？

告诉你，是非常有用的东西。用来偏移transform变换中心点的。

为什么说非常有用呢？SVG元素默认是基于左上角的，但是我们希望可以像CSS的transform变换一样，围绕元素的中心点变换。怎么办？

就是这里的可选参数[ x y]，通过对变换中心点的偏移修正，我们也能让SVG元素围绕自身的中心点旋转了。

所以，上面的demo，我们稍微修改下，就能让矩形围绕自己旋转了，见下：

<rect x="200" y="50" width="120" height="90" rx="10" ry="10" fill="red"></rect>
<rect x="200" y="50" width="120" height="90" rx="10" ry="10" fill="#a0b3d6" transform="rotate(45，260 95)"></rect>

同样的，rotate旋转可以多个值并存：

transform="rotate(45) rotate(-45)"

然而，需要注意的是，SVG属性的transform声明的中心变换坐标是不能共享的。

因此，虽然transform="rotate(45, 260 95)"是中心点旋转，但是，后面再添加其他东西，例如：rotate(-45)则偏移值忽略，终中心点还是SVG的左上角(0,0)位置。

transform="rotate(45,260 95) rotate(-45)"

这样子是回不到原来的位置的！

transform="rotate(45,260 95) rotate(-45,260 95)"

这样子可以

transform scale缩放

SVG中的缩放的语法就比较单纯了，就scale(sx[, sy]), sx表示横坐标缩放比例，sy表示纵坐标缩放比例。其中sy是可缺省的，如果缺失，表示使用和sx一样的值，也就是等比例缩放。其中，sx和sy两个参数可以逗号分隔，也可以使用空格分隔。不支持scaleX, scaleY

刚刚rotate旋转出了个错，跟css不一样的效果，这个scale不会又有问题吧？我们来试试。

<rect x="200" y="50" width="120" height="90" rx="10" ry="10" fill="red"></rect>
<rect x="200" y="50" width="120" height="90" rx="10" ry="10" fill="#a0b3d6" transform="scale(1.5)"></rect>

看起来有点不太正常，想一想，也是可以理解 因为SVG元素属性控制的transform的坐标系统是不一样的。默认变换中心是SVG画布左上角。

嗯，rotate还有参数可以用，scale怎么实现元素中心点缩放呢？

我们可以先translate其中心点位置到元素的中心坐标位置，然后缩放，然后坐标再反方向还原回去。例如，某元素中心点坐标是(95, 75), 垂直缩放1.5倍的效果则是：

transform="translate(95 75) scale(1, 1.5) translate(-95 -75)"

transform skew斜切

---

对于SVG的skew斜切变换，表现效果原理是一样的。但是，使用的语法却相当有意思。

在前面的一些变换中，例如位移、缩放之类是不支持translateX, scaleX这种CSS常见用法的，但是这里的skew却有点让人哭笑不得：不支持skew(x[, y])这种语法，而只能是skewX或者skewY.

别问我为什么？我只是大自然的搬运工，我不生产语法。

同样的，由于变换中心点的差异，CSS实现的变换和SVG属性变换往往最后的位置是不一样的：

总结

矩阵matrix就不介绍了，跟css3 transform中的一样

如果同时设置了svg的transform属性和 css3的transform，css3的transform会覆盖transform属性，而不是叠加