一文带你掌握SVG坐标系统

SVG坐标系统

viewport

viewport指的是SVG图像的可视区域，一个SVG图像的viewport可以无限大，但是可视区域最大只能是屏幕的分辨率，我们通过svg元素中的width和height属性指定viewport的尺寸。

	<svg width="500" height="300"></svg>   

这个例子定义了一个宽500、高300的viewport。
同时，你也可以为svg的viewport指定单位：

• em：默认的字体大小，通常一个字符的高度
• ex：字符x的高度
• px：像素
• pt：点数，1/72英寸
• pc：Picas，1/6英寸
• cm：厘米
• mm：毫秒
• in：英寸

例如，我们让viewport以cm单位为例，在绘制元素中分别以像素和mm为单位进行绘制，做对比：

	<svg width="10cm" height="10cm">
    <rect x="50" y="100" width="50" height="50"
          style="stroke: #000000; fill: none;"/>
 
    <rect x="100" y="100" width="50mm" height="50mm"
          style="stroke: #000000; fill: none;" />
	</svg>   

viewBox

viewBox可以视为真正的坐标系统，viewBox可以比viewport小也可以比viewport大，因为默认preserveAspectRatio为meet(后面会讲)，viewBox比viewport小时，在视觉效果上是放大的，反之则缩小。

如果没指定viewBox属性，浏览器默认会给定一个跟viewport一样的viewBox

你可以使用viewBox来指定自己的用户坐标系统。如果你指定的用户坐标系统和viewport坐标系统的宽高比相同，它将会被拉伸填充满整个viewport区域。如果宽高比不相同，你可以使用preserveAspectRatio属性来指定这个坐标系在viewport中是否完全可见，同时也可以指定它在viewport坐标系统中的位置。

viewBox的语法

	viewBox = "<min-x>