SVG的座标变换transform

这几天用svg画图，发现svg的座标变换有些复杂。

这里有一个例子，在将原始座标系转为用户座标系时比较有用。

记录下来：

1. 蓝色为原始svg座标系；原点为左上角，x正方向向右， y正方向向下；

2. 经过变换，<g transform="translate(0,200) scale(1,-1)">，用户座标系为红色部分，原点可以看成是左下角。

3. 图中绿色，与黄色的矩形是50*50（为了看清，将大小差异了5个单位），可以从用户座标系角度思考画出。也可以考虑继续平移画出。后 一种方式在用于先在图上点击，获得当前图形的中心点位置，然后再画出图形时比较有用。

 

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width=300 height=200>
  <rect x="0" y="0" width="300" height="200" style="stroke-Width:5;stroke:blue;fill:grey" /> <!-- svg 边界 ，左上角为圆点 -->
  <g transform="translate(0,200) scale(1,-1)"> <!-- 座标变换后，左下角为圆点.-->
    <rect x="0" y="0" width="200" height="150" style="stroke-Width:5;stroke:red;fill:grey" /> <!-- 新的用户座标系的边界 -->
	<!-- 在新座标系中，在(100，75)处画个50*50的矩形 -->
	<rect x="100" y="75" width="50" height="50" style="stroke-Width:5;stroke:green;fill:grey" />
	<g transform="translate(100,75)">
	   <g transform="translate(-25,-25)>
	     <rect x="0" y="0" width="50" height="50" style="stroke-Width:5;stroke:green;fill:grey" />
	   </g>
	</g>
  </g>
</svg>

</body>
</html>