工欲善其事必先利其器，沒有真正搞懂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
待更，還有一個屬性，以及平時寫項目的心得總結，今天先寫到這兒~
作者：
承蒙時光出處：
http://www.cnblogs.com/timetimetime/本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。