理解SVG的viewport，viewBox，preserveAspectRatio【2】

        一個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>

        上述代碼中 viewBox="0 0 100 100"，小於viewport，因此必定是放大，又由於preserveAspectRatio的策略是meet，因此縮放比例聽從短邊比例，也就是200/100，放大2倍，實際效果是：

        你用chrome開發者工具查看實心紅色矩形，會發現它的尺寸是300*300比原來150*150正好放大2倍。

        若是preserveAspectRatio的策略是slice：

<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>

        意味着放大是以長邊比例進行的，也就是400/100，4倍。實際效果：

        用開發者工具查看，你會發現它變成600x600，相比原來的150x150確實4倍了：

        preserveAspectRatio的最後一個策略就是值爲none，它的效果和meet時很像，也是以短邊比例爲準縮放，但實際效果又和meet時不一樣：

        實心矩形的放大倍數和meet時同樣，可是實心矩形位置卻不一樣了，左側多出了更多空白。它是如何造成這種樣式結果的有待研究。

參考文章http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/