SVG元素不像HTML元素一样由CSS盒模型管理。这使得我们可以更加灵活定位和变换这些元素-也许一眼看上去不太直观。然而，一旦你理解了SVG坐标系和变换，操纵SVG会非常简单并且很有意义。本篇文章中我们将讨论控制SVG坐标系的最重要的三个属性：viewport， viewBox， 和 preserveAspectRatio。
SVG系列教程
canvas是绘制SVG内容的一块空间或区域。理论上，画布在所有维度上都是无限的。所以SVG可以是任意尺寸。然而，SVG通过有限区域展现在屏幕上，这个区域叫做viewport。SVG中超出视窗边界的区域会被裁切并且隐藏。
视窗
视窗是一块SVG可见的区域。你可以把视窗当做一个窗户，透过这个窗户可以看到特定的景象，景象也许完整，也许只有一部分。
SVG的视窗类似访问当前页面的浏览器视窗。网页可以是任何尺寸;它可以大于视窗宽度，并且在大多数情况下都比视窗高度要高。然而，每个时刻只有一部分网页内容是透过视窗可见的。
整个SVG画布可见还是部分可见取决于这个canvas的尺寸以及preserveAspectRatio属性值。你现在不需要担心这些;我们之后会讨论更多的细节。
你可以在最外层svg元素上使用width和height属性声明视窗尺寸。
- <!-- the viewport will be 800px by 600px -->
- <svg width="800" height="600">
- <!-- SVG content drawn onto the SVG canvas -->
- </svg>
在SVG中，值可以带单位也不可以不带。一个不带单位的值可以在用户空间中通过用户单位声明。如果值通过用户单位声明，那么这个值的数值被认为和px单位的数值一样。这意味着上述例子将被渲染为800px*600px的视窗。
你也可以使用单位来声明值。SVG支持的长度单位有：em，ex，px，pt，pc，cm，mm，in和百分比。
一旦你设定最外层SVG元素的宽高，浏览器会建立初始视窗坐标系和初始用户坐标系。
初始坐标系
初始视窗坐标系是一个建立在视窗上的坐标系。原点(0,0)在视窗的左上角，X轴正向指向右，Y轴正向指向下，初始坐标系中的一个单位等于视窗中的一个”像素”。这个坐标系统类似于通过CSS盒模型在HTML元素上建立的坐标系。
初始用户坐标系是建立在SVG画布上的坐标系。这个坐标系一开始和视窗坐标系完全一样-它自己的原点位于视窗左上角，x轴正向指向右，y轴正向指向下。使用viewBox属性，初始用户坐标系统-也称当前坐标系，或使用中的用户空间-可以变成与视窗坐标系不一样的坐标系。我们在一下节中讨论如何改变坐标系。
到现在为止，我们还没有声明viewBox属性值。SVG画布的用户坐标系统和视窗坐标系统完全一样。
下图中，视窗坐标系的”标尺”是灰色的，用户坐标系(viewBox)的是蓝色的。由于它们在这个时候完全相同，所以两个坐标系统重合了。
上面SVG中的鹦鹉的外框边界是200个单位(这个例子中是200个像素)宽和300个单位高。鹦鹉基于初始坐标系在画布中绘制。
新用户空间(即，新当前坐标系)也可以通过在容器元素或图形元素上使用transform属性来声明变换。我们将在后面讨论关于变换的内容，更多细节在第三部分和最后部分中讨论。
转载请注明： 文章转载自：爱思资源网 http://www.aseoe.com/show-80-745-1.html
