SVG ViewBox & Viewport

一、Viewport

表示 SVG 可见区域的大小，即画布大小，通过 width、height 属性设置。

二、ViewBox

viewBox 用于根据指定的图形去伸展适应容器，的四个值分别代表：

• min-x
• min-y
• width
• height

换句话说，viewBox 相当于一个坐标系统，内容的位置和大小会按照这个坐标系统去设定，效果如下：

如果图形超过了 viewBox 则会隐藏超出部分：

实际使用如下：

这个属性可通过 preserveAspectRatio 来定义。