iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 25
0

SVG-viewport/viewbox

今天學到這個,才發覺這應該要在一開始就講的,為什麼呢?讓我們看下去...

viewport

說明:代表SVG上定義的長寬,即SVG可視範圍

<svg width="500" height="500"></svg>

viewbox

說明:代表SVG上真正可以讓人看到的範圍
viewbox有(x y width height)4個數值,一樣x,y設定左上角起始位置,width和height設定viewbox的範圍。

  • 預設值,viewbox = viewport
    -->預設viewbox和viewport一樣範圍

  • 當viewbox設定 < viewport時
    -->viewbox框的位置會填滿viewport,視覺上圖案會被放大
    藍色框為viewbox
    https://ithelp.ithome.com.tw/upload/images/20181109/201115002PiP3KkaNL.png
    viewbox放大填滿viewport
    https://ithelp.ithome.com.tw/upload/images/20181109/20111500Zyl3sp6OZ6.png

請勿飲酒過量

  • 當viewbox設定 > viewport時
    -->viewbox範圍及圖片會一起縮小到符合viewport大小,視覺上圖案會被縮小
    如下圖,viewbox(藍色框)設定比viewport大,綠色圓大小不變,接著viewbox範及綠色圓一起縮小

preserveAspectRatio

一般來說,viewport和viewbox長寬比例會相同,但如果不相同時,就必須有些屬性控制比例變化,由兩個參數構成:預設值"xMidYMid meet"

  • align:由兩個參數構成,分別為X軸(水平)對齊參數、Y軸(垂直)對齊參數
參數 說明
xMin viewport、viewBox水平靠左對齊
xMid viewport、viewBox水平居中對齊
xMax viewport、viewBox水平靠右對齊
YMin viewport、viewBox垂直靠上對齊,Y要大寫
YMid viewport、viewBox垂直居中對齊,Y要大寫
YMax viewport、viewBox垂直靠下對齊,Y要大寫
  • meetOrslice
參數 說明
meet viewBox等比例縮放,直到寬或高填滿viewport
slice viewBox等比例縮放,直到整個填滿viewport,多的部分裁掉

preserveAspectRatio寫法範例

<!-- preserveAspectRatio寫法 -->
<svg width="300" height="200" stroke="black" viewbox="0,0,100,100" preserveAspectRatio="xMinYMin slice">
</svg> 

初始化

初始化的viewport座標系統,左上角為(0,0),初始化的用戶座標系統(即建立在svg canvas上),兩者初始化相同,接著,如果我們調整viewbox就會改變用戶座標系統,用戶座標系統和viewport座標系統就會不相同(用戶座標系統是什麼?)

這就是為什麼我覺得要先講,應該要先了解最基本的畫布大小,才能在裡面作畫阿,失策~

~SVG龜速學習中,如有疑問或是錯誤,歡迎不吝指教~

參考來源
[1]https://www.jackpu.com/svg-zhong-viewport-yu-viewbox-de-qu-bie/
[2]https://pjchender.blogspot.com/2017/03/svg-viewport-viewbox-zoomdrag.html
[3]https://www.oxxostudio.tw/articles/201409/svg-23-viewpoint-viewBox.html
[4]https://andyyou.github.io/2017/03/17/svg-coordinate-1/


上一篇
SVG-fill
下一篇
SVG-clipping/masking
系列文
30天讓設計師搞定CSS/SVG動畫30

尚未有邦友留言

立即登入留言