[js] svg 与 css3 的 transform

transform translate

HTML元素的偏移(左)transform: translate(295px, 115px)
与svg的偏移 transform="translate(295 115)"

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

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

下面图是基本的45度旋转(左HTML元素，右SVG元素)

由于SVG元素的默认是SVG左上角为中心变换的，
因此，矩形旋转的幅度就有了过山车的感觉。

CSS transform中的rotate语法

rotate(angle)

就一个angle参数，表示角度大小，不过必须要有单位，
比如deg(度), turn(圈), grad(百分度 – 一种角的测量单位，定义为一个圆周角的1/400。常用于建筑或土木工程的角度测量)，
甚至可以使用calc()计算，例如：calc(.25turn - 30deg).

SVGtransform中的rotate语法为：

rotate(angle[ x y]).

[]为可选参数。[ x y]用来偏移transform变换中心点的。

通过对变换中心点的偏移修正，也能让SVG元素围绕自身的中心点旋转

angle数值表示角度deg

transform="rotate(45)"

rotate旋转可以多个值并存

//CSS
transform: rotate(45deg) rotate(-45deg);

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

需要注意的是，
SVG属性的transform声明的中心变换坐标是不能共享的。
因此，虽然transform="rotate(45, 90 75)"是中心点旋转，
但是，后面再添加其他，
例如：rotate(-45)则偏移值忽略，
终中心点还是SVG的左上角(0,0)位置

transform scale

SVG 语法

scale(sx[, sy])

sx表示横坐标缩放比例，sy表示纵坐标缩放比例。
其中sy是可缺省的，如果缺失，表示使用和sx一样的值，
也就是等比例缩放。
其中，sx和sy两个参数可以逗号分隔，也可以使用空格分隔。
这和CSS3中的使用有所不同，另外，
SVG transform属性值缩放是不支持scaleX, scaleY的。

CSS控制的transform和SVG元素属性控制的transform的坐标系统是不一样的。
一个默认元素中心（图左），
一个是SVG画布左上角（图右）

当我们要实现SVG元素居中缩放的效果，
还需要使用translate手动偏移。
先translate其中心点位置到元素的中心坐标位置，
然后缩放，然后坐标再反方向还原回去。

例如，某元素中心点坐标是(95, 75),
垂直缩放1.5倍的效果则是：

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

transform skew

CSS的skew

skewX(-45deg)

skewX(45deg)

SVG的skew
变成了不支持skew(x[, y])这种语法，
而只能是skewX或者skewY

transform="skewX(45)"

CSS左 SVG右

想要让SVG元素中心点斜切，可以先translate偏移，再skew变换

其他居中变换处理

原始中心位置乃SVG左上角

可以把元素默认就放在中心点和SVG左上角重合的位置上

translate(140 105) rotate(45) translate(-140 -105) → translate(140 105) rotate(45)

通过viewBox调整

viewBox可以用来改变SVG画布的视区

可以把元素默认挂在左上角，然后，通过viewBox做手脚，
让元素呈现的位置并不是真正的左上角，

例如应用viewBox='-140 -105 280 210'

此时只需要让元素旋转就可以了，无需额外的做translate位移

转载于:https://www.cnblogs.com/qingmingsang/articles/6226997.html