SVG 入門——理解viewport,viewbox,preserveAspectRatio

標籤：設定   輔助   技術分享   img   理論知識   div   代碼產生   預設   文法   

工欲善其事必先利其器，沒有真正搞懂SVG裡的viewport，viewbox, preserveAspectRatio這三個屬性，就很容易遇到坑，最近寫項目用到svg這三個屬性被我一眼就略過 ，後來發現自己並沒有理解透，導致寫項目產生了奇怪的坑，後面解決了，就是原理沒通透，趁著大周末，來一波整理吧

一、這些理論知識必不可少

1.viewport

<svg width="400" height="200"></svg>

上面svg中定義的是一個寬度為400 高度為200 的視口，也就是viewport，我們都知道，SVG標籤裡接下去嵌套的就是SVG的圖形曲線等的代碼了，這個viewport就是管SVG裡面的元素能顯示的在多大的一個面板中的意思，拿PS來理解，就是PS中的一個畫板的大小，畫出來的東西，就只能在這麼大的畫板裡顯示，超出了就看不到

　　比如我有這樣的一個畫板

然後我把藍色方塊往下挪

因為我就設定了200高度的viewport,往下挪後藍色方塊就有一部分沒顯示出來了

　　2.viewbox 

　　這個是重頭戲哇，注意啦，敲黑板！

viewbox="x, y, width, height"
/*
　　x:左上方開始的橫座標點
　　y:左上方往下的縱座標點
　　width: viewbox的寬度
　　height: viewbox的高度
*/

以上是文法，下面是上一個執行個體

<svg width="400" heigh="200" viewbox="0 0 200 200">     <rect x="0" y="0" width="10" height="10">        </svg>

這段代碼會有什麼效果呢？實際上viewbox是這樣處理的

　　①viewbox="0 0 200 200 "是在寬度為400，高度為200的viewport畫板裡，從座標點（0,0）作為viewbox的左上方點，然後再圈出一戈寬度為200 高度為200的viewbox

　　②然後把viewbox中的截屏內容在viewport中顯示出來，預設保持縱橫比，下面

　　還沒設定viewbox之前

　　

 

設定了viewbox

　　

然後將這個viewbox進行鋪滿viewport，上面的我是用PS話的啊，沒注意大小 - =

　　下面是代碼產生的SVG

　　橙色是我畫的輔助線，原來位置的，紅色是加了viewbox後的效果，SVG的viewbox預設是xMid Ymid meet

 

　　待更，還有一個屬性，以及平時寫項目的心得總結，今天先寫到這兒~

 

SVG 入門——理解viewport,viewbox,preserveAspectRatio