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
  
  viewbox放大填滿viewport
  

請勿飲酒過量

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

preserveAspectRatio

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

• align:由兩個參數構成，分別為X軸(水平)對齊參數、Y軸(垂直)對齊參數

• meetOrslice

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/