svg 坐标

视窗：指网页上可视的矩形局域，<br />
视窗坐标系：以左上角开始x向右y各下<br />
用户坐标系：同上<br />
默认时视窗坐标和用户坐标是一样的，<br />
但是这里需要注意，视窗坐标系属于的是创建视窗的元素，视窗坐标系确定好以后，整个视窗的坐标基调就确定了。但是用户坐标系是属于每个图形元素的，只要图形进行了坐标变换，就会创建新的用户坐标系，这个元素中所有的坐标和尺寸都使用这个新的用户坐标系。<br />

坐标空间变换：<br />
让我们回顾一下canvas用户坐标的变换，它们是通过平移，缩放，旋转函数实现的；每次变换后对以后绘制的图形都起作用，除非再次进行变换，这是"当前"用户坐标系统的概念。canvas只有唯一一个用户坐标系。<br />
　　在SVG中，情况完全不同。SVG本身作为一种向量图元素，它的两个坐标系统本质上都可以算作"用户坐标系统"；SVG的两个坐标空间都是可以变换的：视窗空间变换和用户空间变换。视窗空间变换由相关元素(这些元素创建了新的视窗)的属性viewBox控制；用户空间变换由图形元素的transform属性控制。视窗空间变换应用于对应的整个视窗，用户空间变换应用于当前元素及其子元素。<br />
视窗变换 - viewBox属性：<br />
viewBox属性值的格式为(x0,y0,u_width,u_height)，每个值之间用逗号或者空格隔开<br />

它们共同确定了视窗显示的区域：视窗左上角坐标设为(x0,y0)、视窗的宽设为u_width，高为u_height；这个变换对整个视窗都起作用。<br />

 <svg width="200" height="200" viewBox="0 0 200 200">
<rect x="0" y="0" width="200" height="200" fill="Red" />
<rect x="0" y="0" width="100" height="100" fill="Green" />
</svg>
以上是默认情况

<svg width="200" height="200" viewBox="0 0 100 100">
<rect x="0" y="0" width="200" height="200" fill="Red" />
<rect x="0" y="0" width="100" height="100" fill="Green" />
</svg>
以上呢，坐标点已经不一样了，图被放大了
<svg width="200" height="200" viewBox="0 0 400 400">
<rect x="0" y="0" width="200" height="200" fill="Red" />
<rect x="0" y="0" width="100" height="100" fill="Green" />
</svg>
视窗坐标系的单位被缩小，所以两个矩形都缩小了。<br />
在日常工作中，我们经常需要完成的一个任务就是缩放一组图形，让它适应它的父容器。我们可以通过设置viewBox属性达到这个目的。
则绘制的图形，宽和高的缩放比例分别为：width/u_width, height/u_height<br />

能建立新视窗的元素<br />
     任何时候，我们都可以嵌套视窗。创建新的视窗的时候，也会创建新的视窗坐标系和用户坐标系，当然也包括裁减路径也会创建新的。下列是能建立新视窗的元素列表：
svg：svg支持嵌套。<br />
symbol：当被use元素实例化的时候创建新的视窗。<br />
image：引用svg元素时会创建新视窗。<br />
foreignObject：创建新视窗去渲染里面的对象。<br />


用户坐标系的变换 - transform属性：<br />
该类型变换是通过设置元素的transform属性来指定的。这里需要注意，transform属性设置的元素的变换，只影响该元素及其子元素，与别的元素无关，不影响别的元素。<br />
平移 - translate<br />
      移变换把相关的坐标值平移到指定的位置，该变换需要传入两个轴上平移的量。看例子：<br />
<svg width="200" height="200" >
<rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
</svg><br />

旋转 - rotate<br />
      旋转一个元素也是一个很常见的任务，我们可以使用rotate变换实现，该变换需要传入旋转的角度参数。看例子：<br />
      <svg width="200" height="200" >
<rect x="0" y="0" width="10" height="10"  transform="rotate(45)"/>
</svg>
倾斜 - skew<br />
      transform还支持倾斜变换，可以是沿着x轴的(左右倾斜，正角度为向右倾斜，其实是倾斜了y轴)，或者是沿着y轴的(上下倾斜，正角度为向下倾斜，其实是倾斜了x轴)倾斜；该变换需要传入一个角度参数，这个角度参数会决定倾斜的角度。看下面的例子：<br />
      <svg width="100" height="100">
 <rect x="0" y="0" width="100" height="100" fill="green" />
 <circle cx="15" cy="15" r="15" fill="red" />
 <circle cx="15" cy="15" r="15" fill="yellow" transform="skewX(45)" />
 <rect x="30" y="30" width="20" height="20"  />
 <rect x="30" y="30" width="20" height="20" transform="skewX(45)"  />
 <rect x="30" y="30" width="20" height="20" transform="skewY(45)"  />
</svg>
缩放 - scale<br />
      缩放对象由缩放变换完成，该变换接受2个参数，分别指定在水平和竖直上的缩放比例，如果第二个参数省略则与第一个参数取相同的值。看下面的例子：<br />
      <svg width="500" height="500">
 <text x="20" y="20" font-size="20">ABC (scale)</text>
 <text x="50" y="50" font-size="20" transform="scale(1.5)">ABC (scale)</text>
</svg>