Zi 字媒體

此篇文章瀏覽量： 19 一個 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. 若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。 Tweet