比喻
想象一个无穷大的画布，你可以在画布上的任何地方绘制你想要的任何内容，你也可以以任何你想要的尺寸来绘制。这就是SVG画布。
现在接着想象，有人在你的画布正前方建立了一堵同样的无穷大的墙，墙的宽度和高度也是无限延伸的，把画布全都挡住了。
因为墙都是直接放在画布前面的，所以我们无法看到画布上的内容。但是建墙的人很好，帮我们开了一扇窗户，甚至还给了我们设置这扇窗户大小尺寸的能力。这扇窗户就是SVG视窗。
墙的筑造者并没有在这里停住。他还给我们留下了工具，我们可以用它来移动画布，决定要将画布的哪部分显示在窗口区域，还可以决定要显示的区域的大小。这些工具在SVG元素中是以属性的形式（viewBox和preserveAspectRatio）表现出来的。
我会在接下来的两周讲解这些属性。今天我想将内容集中在画布、墙、视窗上，先从它们使用的坐标系统讲起：
SVG坐标系统
虽然SVG和CSS盒模型的表现形式不一样，但是它们的坐标系统的工作方式是相同的。
所有SVG坐标系的起点(0,0)都是在父元素的左上角，它们的父元素可以是body元素、div元素、或其它的容器。
当你创建了一个新的SVG元素，你也就创建了一个新的坐标系统，即无穷大的SVG画布。起点可能是和父元素的左上角对齐，但是画布在所有方向无限延伸的。x轴的正方向是向右，y轴的正方向是向下。两个坐标轴的负方向也会向左边和上边延伸。
关于SVG有一点需要明白的就是多坐标系统的同时使用。每次你创建一个新的SVG元素，就相当于在它的坐标空间创建了一个新的画布，同时也创建了一个视窗。
每一对画布和视窗的坐标系统都是默认对齐的。它们看起来就像是在同一个系统内，但其实并不是。正如我们接下来要看的，你可以改变它们相互对齐的方式。
在实际中，你在无穷大的画布上创建的元素是放置在画布的原点附近的，但是理论上，它们是可以放在任何地方的。你可以创建一个圆，然后把它放在原点右边四十亿像素远的地方，没人阻止你这样做。
理论上，窗口也可以是接近无穷大的，你可以设置你想要的任何尺寸。但是，你只有固定了窗口的尺寸，它才可以是固定大小的，而且你一旦设置了尺寸，坐标系统将会在空间上保持这个大小。
用户代理程序（即浏览器）会默认对齐这两个坐标系统的原点和坐标轴，但是你可以根据自己的需要改变这种对齐方式。
这两个系统可以设置不同的单位。可以把一个设置为像素，另一个设置为毫米、picas、英寸、点、ems，或者其他任何你想要的单位。百分比%是例外，它不能在这里使用。
再次记住，这两个坐标系统，一个是作用在无穷大的画布上的，另一个是作用于固定窗口的。
SVG视窗
每次你创建了一个新的SVG元素，你也就创建了一个新的SVG视窗。视窗的大小等于你为SVG元素设置的宽度和高度。
新闻热点
疑难解答
