理解SVG的viewport，viewBox，preserveAspectRatio

        一个svg，设置了viewBox之后，viewBox的长宽值如果都小于svg的viewport的长宽值，那么结果一定是放大；但是viewBox的长宽值一旦有一个值大于vewport之后，最后的实际效果就不是放大，而是缩小了。

        因为viewBox的目的是要自己设置的长宽范围填满viewport。viewport的长宽是确定的，viewBox设置的值如果超出了viewport，然后又企图去填满viewport，必然是缩小自己。这里的“填满”换成“适应”应该更合适。viewBox总是试图让自己从初始设置的尺寸变成和viewport具有一样的尺寸。

        然而这种放大或缩小其实是有策略的，这个策略由svg的preserveAspectRatio属性来确定。preserveAspectRatio的值成组出现的，第一个参数值表示位置，第二个就是表示缩放策略了。如果第二个值是meet就是缩放比例按照短边的来进行：

<svg width="400" height="200" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet" style="border:1px solid #cd0000;">
    <rect x="10" y="10" width="150" height="150" fill="#cd0000"/>
</svg>

<svg width="400" height="200" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin slice" style="border:1px solid #cd0000;">
    <rect x="10" y="10" width="150" height="150" fill="#cd0000"/>
</svg>