svg的viewport和viewBox

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>