前言

svg 的viewBox 可以重新定义视口的显示范围，通常表现为平移，缩放内容，之前测试的一直是viewBox 和viewPort 之间的等比缩放，后来发现不等比情况与认知有些出入，如下

<svg width="100" height="100" viewBox="0 0 50 100" style="border: 1px solid #ddd"><circle id="mycircle" cx="50" cy="50" r="50"  stroke-width="1" stroke="#0f0"/>
</svg>

避免误导，就不说之前对viewBox 的理解了。

一、案例解析

如何确定添加viewBox 之后的内容？以下是通过测试得出的步骤

1. 第一步 确定 viewBox 的选区（蓝色）
2. 只考虑中心对齐策略，将viewBox 与viewPort 中心重叠
3. 中心缩放 viewBox 使其恰好能放入viewPort,以较小的长宽缩放比（如：viewPort.height/viewBox.height）为准，本例 中较小缩放比为1，因此，并不需要缩放，viewPort(红框)所示即为缩放后的结果

换个具有明显缩放和平移效果的，如下

<svg width="200" height="100" viewBox="50 50 400 100" style="border: 1px solid red"><circle id="mycircle" cx="50" cy="50" r="50"  />
</svg>