python处理svg 平移 旋转_理解SVG transform坐标变换(转)

一、HTML transform和SVG transform

SVG中自带transform属性，没错，是属性，例如：

普通的HTML元素没有transform属性，但是支持CSS3的transform, 好奇的小伙伴可能会疑问了，CSS3中的transform变换，跟SVG中的transform是什么关系呢？

恩，有点类似于谢霆锋和陈冠希之间的关系，有些小复杂。

OK, 先说说相似之处吧。

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

下面就是不一样的地方了：

1.CSS3transform一般用在普通元素上，虽然也可以应用在SVG元素上，但是IE浏览器(IE edge未测试)却不支持SVG元素；

rect {/* IE说：你这是弄啥来？ */transform:rotate(45deg);}

2.HTML元素的CSS3 transform和SVG的transform坐标系统大相径庭；

平常我们使用transform其坐标是相对于当前元素而言的，默认是元素的中心点变换，我们可以通过transform-origin属性改变变换的中心点。而SVG中的transform的坐标变换的是相对于画布的左上角计算的，跟HTML的transform差别较大，理解上也更加麻烦。而本文就是彻底理清SVG中的transform到底是怎么工作的。

3.具体的语法细节有差异。SVGtransform属性语法有些自带偏移。而CSStransform则更加纯粹些。

//zxx: 据说CSS的transform和SVG的transform属性即将合并。

二、SVG transform translate位移

我们先来看下最简单最基本的translate位移变换，例如，我们偏移(295,115)大小的位置，HTML元素的偏移(下图左)和SVG元素的偏移(下图右)就会不一样。一个是相对自己的中心点(下图左)，一个是SVG的左上角(下图右)。

虽然两者的相对位置不一样，但是，对于单纯地位移来讲，无论你相对于那个点位置，实际偏移的位置都是一样的，因此，从表现上讲，两者最终的位置看上去还是一样的。

前面我们提到过，SVG元素也能使用CSS3的transform进行变换(非IE浏览器)，但是只能支持2D层面的几个属性，例如translateX(tx),translateY(ty)以及translate(tx[, ty]).translateZ(tz)则并不支持。

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

transform="translate(30px 12px)"

下面这种无单位写法才可以：

trans