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

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

viewport 概念

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

<svg width="200" height="200">
  <!-- 其它 svg 元素 -->
</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.

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of