SVG画布宽高

viewport

表示SVG可见区域的大小。一个SVG图像理论上可以无限大，但是在同一时刻只有图像的某些部分可以被看见。这个可见的区域就被称为viewport。

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

以上代码定义了一个视区，宽500单位，高300单位；

在SVG中，可以带单位，也可以不带单位。如果没有为值指定单位，那么它将使用像素为单位。也就是说上面的例子中，viewport的宽度为500px，高度为300px。

单位	含义
em	相对于父元素的字体大小
ex	相对于小写字母"x"的高度
px	相对于屏幕分辨率而不是视窗大小：通常为1个点或1/72英寸
in	inch, 表英寸
cm	centimeter, 表厘米
mm	millimeter, 表毫米
pt	1/72英寸
pc	12点活字，或1/12点
%	相对于父元素。正常情况下是通过属性定义自身或其他元素

viewbox

viewBox是用于在画布上绘制SVG图形的坐标系统。这个坐标系统可以比viewport大，也可以比viewport小，并且它可以在viewport中完全可见或部分可见。

<svg viewbox="<min-x> <min-y> width height"><svg>

和值决定viewbox的左上角位置。和值决定viewbox的宽度和高度。

注意：viewBox的宽度和高度不需要设置得和<svg>元素的宽度和高度相同。和不允许设置为负数。

preserveAspectRatio(保持宽高比)

如果viewport和viewBox的宽高比不相同。你需要自己来指定如何在SVG中显示SVG图像。你可以在<svg>中使用preserveAspectRatio属性来指定。

preserveAspectRatio="xMidYMid meet"

preserveAspectRatio属性的值为空格分隔的两个值组合而成。

例如，上面的xMidYMid和meet.

第1个值表示，viewBox如何与SVG viewport对齐；第2个值表示，如何维持高宽比（如果有）。

其中，第1个值又是由两部分组成的。前半部分表示x方向对齐，后半部分表示y方向对齐。家族成员如下：

值	含义
xMin	viewport和viewBox左边对齐
xMid	viewport和viewBox x轴中心对齐
xMax	viewport和viewBox右边对齐
YMin	viewport和viewBox上边缘对齐。注意Y是大写。
YMid	viewport和viewBox y轴中心点对齐。注意Y是大写。
YMax	viewport和viewBox下边缘对齐。注意Y是大写。

将上面表格中的各个值两两组合，可以得到下面的9种align值：

• xMinYMin：viewBox的对齐viewport的最小X值，min-y对齐viewport的最小Y值。相当于backrgound-position: 0% 0%;。
• xMinYMid：viewBox的对齐viewport的最小X值，viewBox的Y轴中点对齐viewport的Y轴中点。相当于backrgound-position: 0% 50%;。
• xMinYMax：viewBox的对齐viewport的最小X值，min-y+对齐viewport的最大Y值。相当于backrgound-position: 0% 100%;。
• xMidYMin：viewBox的X轴中点对齐viewport的X轴中点，min-y对齐viewport的最小Y值。相当于backrgound-position: 50% 0%;。
• xMidYMid（默认值）：viewBox的X轴中点对齐viewport的X轴中点，viewBox的Y轴中点对齐viewport的Y轴中点。相当于backrgound-position: 50% 50%;。
• xMidYMax：viewBox的X轴中点对齐viewport的X轴中点，min-y+对齐viewport的最大Y值。相当于backrgound-position: 50% 100%;。
• xMaxYMin：viewBox的+对齐viewportX轴的最大值，min-y对齐viewport的最小Y值。相当于backrgound-position: 100% 0%;。
• xMaxYMid：viewBox的+对齐viewportX轴的最大值，viewBox的Y轴中点对齐viewport的Y轴中点。相当于backrgound-position: 100% 50%;。
• xMaxYMax：viewBox的+对齐viewportX轴的最大值，min-y+对齐viewport的最大Y值。相当于backrgound-position: 100% 100%;。

第2部分的值支持下面3个：

值	含义
meet	保持宽高比并将viewBox缩放为适合viewport的大小
slice	保持宽高比并将所有不在viewport中的viewBox剪裁掉
none	不保存宽高比。缩放图像适合整个viewbox，可能会发生图像变形

Demo

demo地址： https://www.sarasoueidan.com/demos/interactive-svg-coordinate-system/index.html