坐标系统
SVG存在两套坐标系统：视窗坐标系与用户坐标系。默认情况下，用户坐标系与视窗坐标系的点是一一对应的，都为原点在视窗的左上角，x轴水平向右，y轴竖直向下；如下图所示：
SVG的视窗位置一般是由CSS指定，尺寸由SVG元素的属性width和height设置，但是如果SVG是存储在embedded对象中(例如object元素，或者其他SVG元素)，而且包含SVG的文档是用CSS或者XSL格式化的，并且这些外围对象的CSS或者其他指定尺寸的值已经可以计算出视窗的尺寸了，则此时会使用外围对象的尺寸。
这里需要区分视窗，视窗坐标系，用户坐标系的概念：
视窗：指的是网页上面可视的矩形局域，长度和宽度都是有限的，这个区域一般与外围对象的尺寸有关。
视窗坐标系：本质是一个坐标系，有原点，x轴与y轴；而且在两个方向上是无限延伸的。默认情况下，原点在视窗的左上角，x轴水平向右，y轴竖直向下。可以对这个坐标系的点进行变换。
用户坐标系：本质是一个坐标系，有原点，x轴与y轴；而且在两个方向上是无限延伸的。默认情况下，原点在视窗的左上角，x轴水平向右，y轴竖直向下。可以对这个坐标系的点进行变换。
默认情况下，视窗坐标系与用户坐标系是重合的，但是这里需要注意，视窗坐标系属于的是创建视窗的元素，视窗坐标系确定好以后，整个视窗的坐标基调就确定了。但是用户坐标系是属于每个图形元素的，只要图形进行了坐标变换，就会创建新的用户坐标系，这个元素中所有的坐标和尺寸都使用这个新的用户坐标系。
简单点说：视窗坐标系描述了视窗中所有元素的初始坐标概况，用户坐标系描述了每个元素的坐标概况，默认情况下，所有元素都使用默认的与视窗坐标系重合的那个用户坐标系。
坐标空间变换
让我们回顾一下canvas用户坐标的变换，它们是通过平移，缩放，旋转函数实现的；每次变换后对以后绘制的图形都起作用，除非再次进行变换，这是"当前"用户坐标系统的概念。canvas只有唯一一个用户坐标系。
在SVG中，情况完全不同。SVG本身作为一种向量图元素，它的两个坐标系统本质上都可以算作"用户坐标系统"；SVG的两个坐标空间都是可以变换的：视窗空间变换和用户空间变换。视窗空间变换由相关元素(这些元素创建了新的视窗)的属性viewBox控制；用户空间变换由图形元素的transform属性控制。视窗空间变换应用于对应的整个视窗，用户空间变换应用于当前元素及其子元素。
视窗变换 - viewBox属性
所有的能建立一个视窗的元素(看下一节)，再加上marker,pattern,view元素，都有一个viewBox属性。
viewBox属性值的格式为(x0,y0,u_width,u_height)，每个值之间用逗号或者空格隔开，它们共同确定了视窗显示的区域：视窗左上角坐标设为(x0,y0)、视窗的宽设为u_width，高为u_height；这个变换对整个视窗都起作用。
这里一定不要混淆：视窗的大小和位置已经由创建视窗的元素和外围的元素共同确定了(例如最外层的svg元素建立的视窗由CSS，width和height确定)，这里的viewBox其实是设置这个确定的区域能显示视窗坐标系的哪个部分。
viewBox的设置其实是包含了视窗空间的缩放和平移两种变换。
变换的计算也很简单：以最外层的svg元素的视窗为例，假设svg的宽与长设置为width,height，viewBox的设置为(x0,y0,u_width,u_height)。则绘制的图形，宽和高的缩放比例分别为：width/u_width, height/u_height。视窗的左上角的坐标设置为了(x0,y0)。
体会下面几种代码绘出的结果的不同：
新闻热点
疑难解答
