SVG之ViewBox

最近開始看SVG Essentials。找不到中文版的，逼着本身看原版書，進度比較慢，不過邊學技術邊學英語仍是挺有成就感的^_^。
目前看到Chapter 4，有必要先停下來整理下viewport這個知識點，我的感受挺關鍵的。

viewBox用來幹嗎？

比方說，我用svg畫了個半徑200px的圓

<circle cx="200" cy="200" r="200" fill="#fdd" stroke="none"></circle>

若是是在一個400*400的畫布上，圓正好撐滿整個畫布，挺好的。
好了，而後我要把這個圓嵌入到本身的頁面裏的svg標籤裏去，頁面的svg標籤尺寸是由實際業務須要來定的，不必定正好是，可能大可能小，還可能不是正方形。

<svg style="width:150px; height:300px">
    <circle cx="200" cy="200" r="200" fill="#fdd" stroke="none"></circle>
</svg>

正常狀況下面瀏覽器中顯示是這個樣子的

產品見了確定不樂意啊，「我要整個圓啊，誰要這種殘次品啊」。
咋整的，要麼把這個圓的代碼改了吧。
可若是不是簡簡單單一個圓呢，而是一大堆複雜代碼，改個鬼啊。
呵呵~此刻，即是viewBox用武之地！

<svg style="width:150px; height:300px" viewBox="0 0 400 400">
    <circle cx="200" cy="200" r="200" fill="#fdd" stroke="none"></circle>
</svg>

搖身一變就成這樣了

圓變小了，展現全了，還垂直居中了。
一件一件事來，看看發生了什麼。

viewBox的四個參數分別表明：最小X軸數值；最小y軸數值；寬度；高度。
前兩個暫時用不到，我的理解除非要對內部svg作總體位移，不然通常都是0 0，暫時先不作解釋，重點關注後兩個參數。
想象一下viewBox是個400*400的正方形，可是單位不是px，也不是任何一個css單位，就當是一個假的單位吧。在viewBox放了一個圓，這個圓的半徑是200，單位也不是px，而是變成了和viewBox的單位如出一轍的那個假的單位。爲啥說是假的呢？由於這個單位表明的長度是會變的，接着看。
svg有個特色，在默認狀況下，會調整這個viewBox的大小，讓這個viewBox正好能被放進svg裏去。拿上面例子來講，viewBox是個正方形，而svg的寬度比高度小，因此就把viewBox的大小縮小到和svg寬度同樣，就能正好將viewBox放進svg裏來了。因此如今viewBox的實際大小是個150px*150px的正方形。
因此如今能夠肯定的是，viewBox的一個單位表明的長度 = 150px/400 = 0.375px。
而viewBox內部的全部數值*0.375px纔是真正的長度。那個circle的圓心其實是在座標75px, 75px的位置上，半徑爲75px。

圓的具體大小大概就是這麼回事。
再看svg那個默認調整viewBox大小是怎麼回事兒。
隱藏屬性preserveAspectRatio粉墨登場！

preserveAspectRatio又用來幹嗎？

英文直譯：維持外觀比例。好像還挺語義化的一屬性名。
對，這是個屬性，它和viewBox的關係特別密切。即便不顯示聲明這個preserveAspectRatio屬性，viewBox也是會有這個屬性的默認設置的，即preserveAspectRatio="xMidYMid meet"
顯示聲明方式以下：

<svg style="width:150px; height:300px" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet">

說說preserveAspectRatio的這個參數。

第一個參數有9個不一樣值可選

xMinYMin,
xMinYMid,
xMinYMax,
xMidYMin,
xMidYMid,
xMidYMax,
xMaxYMin,
xMaxYMid,
xMaxYMax

是否是特有規律啊？x和y表示對齊的軸線，min,mid,max表示對齊的方式。min是往座標小的方向對齊；mid居中對齊；max是往座標大的方向對齊（順帶一提svg的座標0刻度在左上角）。

第二個參數有兩個值可選：meet和slice
meet就是前面那種自動調整viewBox到能夠在svg畫布中徹底展現。很是相似css裏background-size:contain
而slice是自動調整viewBox到撐滿整個svg畫布。很是相似background-size:cover

再回看第二張圖裏那個垂直居中的圓，就能明白爲何會「圓變小了，展現全了，還垂直居中了」。

其實說是preserveAspectRatio的第一個參數有9種值，在肯定svg畫布寬大於高，或者高大於寬的狀況下，能夠縮減到就3種值，其餘值都是重複的，但在不肯定畫布尺寸時，仍是要明確需求選擇合適的參數值。

preserveAspectRatio還有個單獨使用的參數："none"。
這種時候viewBox會被拉伸到和svg畫布相同尺寸，而內部的全部svg元素也會被等比拉伸，而不是維持原有比例。

第一個知識點整理完畢，待續~ 必須啃完人生第一本原版技術書！！！