viewport
是 svg 图像的可见区域。 svg标签上的width, height表示的就是viewport。如果内部渲染的图标不在这个视口内，他就不会被渲染出来。
viewBox
是用于在画布上绘制 svg 图形的坐标系统。如果不指定viewBox，他就等同于 0 0 svg宽度 svg高度。
<svg width="500" height="200" viewBox="0 0 50 20" style="border: 1px solid #000000"> <rect x="20" y="10" width="10" height="5" style="stroke: #000000; fill:none;"/> </svg>
上述案例中 viewBox 坐标系中，上述代码相当于：
<svg width="500" height="200" style="border: 1px solid #000000"> <rect x="200" y="100" width="100" height="50" stroke-width="10" style="stroke: #000000; fill:none;"/> </svg>
所以：图标会根据viewport和viewBox的比值来进行缩放。除了svg的视口宽高不需要通过计算缩放，其他的标签属性和viewBox都需要通过计算来确定图标的位置和大小。
preserveAspectRatio
用于当 viewport 和 viewBox 宽高比不相同时，指定这个坐标系在viewport 中是否完全可见，同时也可以指定它在viewport 坐标系统中的位置。
preserveAspectRatio 是一个较难理解的概念，它相当于在 viewport 内部绘制了一个虚拟内框，它的默认值为：xMidYMid meet
<svg width="500" height="200" viewBox="0 0 200 200" style="border: 1px solid #000000" preserveAspectRatio="xMidYMid meet"> <rect x="100" y="100" width="100" height="50" stroke-width="10" style="stroke: #000000; fill:none;"/> </svg>
上述配置的原理如下图：
网络异常，图片无法展示
|
<svg width="500" height="200" viewBox="0 0 200 200" style="border: 1px solid #000000" preserveAspectRatio="xMaxYMin meet"> <rect x="100" y="100" width="100" height="50" stroke-width="10" style="stroke: #000000; fill:none;"/> </svg>
上述配置的原理如下图：
网络异常，图片无法展示
|
preserveAspectRatio 第二个参数如下：
- meet: 保持宽高比并将viewBox缩放为适合viewport的大小
meet 模式下，svg 将优先采纳压缩比较小的作为最终压缩比，meet 是默认参数
- slice: 保持宽高比并将所有不在viewport中的viewBox剪裁掉
<svg width="500" height="200" viewBox="0 0 200 200" style="border: 1px solid #000000" preserveAspectRatio="xMidYMax slice"> <rect x="100" y="100" width="100" height="50" stroke-width="10" style="stroke: #000000; fill:none;"/> </svg>
上述代码原理如下图：
网络异常，图片无法展示
|
<svg width="500" height="200" viewBox="0 0 200 200" style="border: 1px solid #000000" preserveAspectRatio="xMaxYMin slice"> <rect x="100" y="100" width="100" height="50" stroke-width="10" style="stroke: #000000; fill:none;"/> </svg>
上述代码原理如下图：
网络异常，图片无法展示
|
slice 模式下，svg 将优先采纳压缩比较大的作为最终压缩比
- none: 不保存宽高比。缩放图像适合整个viewbox，可能会发生图像变形
none 模式下，svg 将分别计算 x 和 y 轴的压缩比
<svg width="500" height="200" viewBox="0 0 200 200" style="border: 1px solid #000000" preserveAspectRatio="none"> <rect x="100" y="100" width="100" height="50" stroke-width="10" style="stroke: #000000; fill:none;"/> </svg>
