SVG 研究之路 (23) - 理解 viewport 與 viewbox

記得我初次接觸 SVG 的時候,常常為了定位和大小感到相當的疑惑,有時候明明設定了這樣的大小,莫名其妙的又變成了另外的大小,也不知道該如何去設定,直到看了「W3C 的定義」之後,總算才明白了箇中原理,雖然我們都知道 SVG 該如何去使用,但往往一開始卻忽略了 SVG 的許多設定,所以這篇文章我們回頭仔細看看相關的設定,對於之後的圖形操作,也才能夠真正的融會貫通,也不需要一查再查了。

參考:W3C 的定義

SVG 研究之路 (17) - Stroke-marker 裡其實也有提到 viewbox ,但是總覺得沒有直接來篇文章介紹,觀念上再遇到的時候又會亂掉了。這篇主要會介紹 viewport ,當中包含了 viewbox 和 preserveAspectRatio 兩個屬性。

viewport

簡單來說這也不算是個屬性,這是指「視圖」或「視區」,也就是圖片可視區域的大小,除了 SVG 本身,一些指定的元素也是有視區的機制存在,例如 symbol、image、pattern、marker 都是,如果我們以 SVG 來說,width="300" height="300" 就表示我們定義了一個 300x300 的視區,與 HTML 和 CSS 比較不同的地方,SVG 本身定義這些屬性是沒有單位的,不過基本上就是以「像素 px」為單位。

viewbox ( min-x, min-y, width, height )

viewbox 對於第一次接觸的人來說,是很抽象的一個元素,第一因為不知道它是幹嘛用的,第二,就算你勉強了解了,還是不清楚該如何去設定。

首先來談談 viewbox 的原理,它的原理其實很簡單,就直接從字面上翻譯:視盒,也就是 SVG 的可視範圍,講到這裡應該有點亂了,為什麼上面才提到 viewport,現在又來一個可視範圍?其實應該這樣解釋,當我們不設定 viewbox 的時候,viewbox 就是整個 viewport 的大小,當我們設定了 viewbox,等於就是告訴 SVG 說:「只有這個區域是我要表現的」,SVG 便會把這個區域放大到 viewport 的大小,如果還是很難理解,可以想像一下我們家的電視機,電視機就是那麼大,就是 viewport,而電視機裡的畫面,可以特寫,可以全景,這就是 viewbox。

SVG 研究之路 (23) - 理解 viewport 與 viewbox

換句話說,viewbox 其實是一個虛擬的座標系統,當我們使用了 viewbox,位置和大小就會按照 viewbox 的座標系統去做設定,看下面這張示意的動畫會更清楚。

SVG 研究之路 (23) - 理解 viewport 與 viewbox

如果我們將圖形超過了 viewbox 會如何呢?看下面的動畫就更能理解:

SVG 研究之路 (23) - 理解 viewport 與 viewbox

這時候你一定還有疑問,如果今天 viewbox 的比例和 viewport 不同該怎麼辦呢?最終結果當然還是會以填滿 viewport 為主,畢竟不可能有畫面可以超出電視機的吧!( 3D 電視?XD ) 不過畢竟不是每個 viewbox 都和 viewport 同比例,這樣又該如何去做設定呢?這時候就需要用到「preserveAspectRatio」了。

preserveAspectRatio ( align [meetOrSlice] )

preserveAspectRatio 是使用 viewbox 時,一個搭配服用的特別屬性,這個屬性必須要有 viewbox 才有作用,不然寫了就會直接被忽略掉,接著我們看到 preserveAspectRatio 裏頭具有兩個參數,第一個參數是必填的 align,第二個參數是選填的 meetOrSlice,也因此從字面上可以發現,preserveAspectRatio 是一個以對齊為主,然後再選擇要自動填滿還是咖掉的屬性,了解之後,就讓我們來一一解釋。

小結

以上就是 SVG 的 viewport 與 viewbox,理解之後,對於各種圖形的顯示區域與放大縮小,就能有更深一層的體會,也不容易用錯囉!

有興趣瞧瞧其他新文章嗎?