1、SVG的世界、视野、视窗的概念

1. 世界是无穷大的，
2. 视野是观察世界的一个矩形区域
3. 视窗是在浏览器上渲染SVG图像的区域

具体到代码是

1. SVG代码定义世界
2. viewBox, preserveAspectRatio控制视野
3. width, height控制视窗

<svg xmlns="..."
    width="800" height="600"
    viewBox="0 0 400 300"
    preserveAspectRatio="xMidYMid meet"
    <!--SVG Content-->
</svg>

width和height

定义了视窗的大小。视窗就是svg在浏览器上显示的宽高

viewBox

参数1，2：视野在世界坐标系中的坐标x, y
参数3，4：视野的宽和高

preserveAspectRatio参数

1. align

• none
• xMinYMin
• xMinYMax
  ...

2. meetOrSlice

• meet 视窗能看见整个视野，如果视窗viewbox和svg比例不一样，就会出现空白

在xMidYMid情况下，选择meet;红框是视窗viewbox，绿框是视野

• slice 视野填满视窗，所以视窗可能只看到视野的一部分

在xMidYMid情况下，选择slice;红框是视窗viewbox，绿框是视野