此篇文章瀏覽量:
403
一個 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.