[SVG] 9. svg 中的 viewport 和 viewBox 觀念

一個 svg 元素，其實就是代表一個 viewport，即可視範圍，假設指定 svg 的寬高皆為 200px，那麼該 svg 的可視範圍(viewport)就是寬高皆為 200px 這樣的範圍。那麼 viewBox 又是什麼呢？

viewport 概念

一般我們設定了一個 svg 元素，通常會給它寬高，如下：

上面的 width 、 height 沒有提供單位，預設就是 px，當然你也可以設定百分比(%)之類的單位。

經過上述的設定之後，其實我們就可以說這個 svg 的 viewport(可視範圍) 是 寬 200px ，高 200px，裡面的所有其他 svg 元素，都會在這個範圍中顯示。

viewBox 概念

至於 viewBox 的概念，我會將它比喻成放大鏡吧，也就是 zoom-in 的功能。在一個 viewport 當中，我們可以設定僅顯示 viewport 範圍中的一部份就好，設定好後，會再自動放大填滿 viewport 可視範圍。

設定方式如下：

viewBox="0 0 100 100"

代表的意義是，先指定一個點的座標：x 是 0， y 也是 0 ，然後寬度 100px ，高度也是 100px。

範例

這個範例顯示了3個部份：

• 第一個：顯示一個 circle 元素完整的圓。
• 第二個：設定 viewBox，顯示左上的 1/4 圓。
• 第三個：設定 viewBox，顯示右下的 1/4 圓。

See the Pen svg 的 viewport 和 viewBox by CarlosStudio (@carlos411) on CodePen.