坐标定位

SVG 坐标系统是：以页面的左上角为(0,0)坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下。注意，这和你小时候所教的绘图方式是相反的。但是在HTML文档中，元素都是用这种方式定位的。

示例：

<rect x="0" y="0" width="100" height="100" />

定义一个矩形，即从左上角开始，向右延展100px，向下延展100px，形成一个100*100大的矩形。

像素

在没有进一步规范说明的情况下，1单位等同于1个屏幕单位。要明确改变这种设定，SVG里有多种方法。我们从svg根元素开始：

<svg width="100" height="100">

上面的元素定义了一个100*100px的SVG画布，这里1单位等同于1屏幕单位。

<svg width="200" height="200" viewBox="0 0 100 100">

这里定义的画布尺寸是200*200px。但是，viewBox属性定义了画布上可以显示的区域：从(0,0)点开始，100宽*100高的区域。这个100*100的区域，会放到200*200的画布上显示。于是就形成了放大两倍的效果。