我是通過《SVG精髓》這本書學習的svg，說實話，這本書寫的不好，或者說翻譯的不好，我沒有看過這本書的原版，不知道原文寫的怎么樣，但是翻譯出來的有些句子真的很拗口。以前老師給我們API文檔的時候一直是英文的，我們問他為什么不給中文版的，英文版的看起來費勁，老師說原版的你們能看懂，翻譯過來就看不懂了，現在是深有領會啊\(^o^)/~
廢話說完，來看正事，svg的坐標系統和大多數繪圖的坐標系統一樣，左上角為原點，從左向右x軸遞增，從上到下y軸遞增。這本沒什么好說的，大家都知道，但是奇葩的是<svg>元素有個屬性叫viewbox就比較扯淡了，要是自己研究這個東西真還有點兒費勁，下面開始詳談~~~
<svg>元素的屬性width和height分別指定svg的寬和高，值為數字或者是百分比。當值是數字時可以帶上單位，有如下可選單位：em（默認字體的大小16px），ex（字母x的高度），px（像素），pt（點 1/72英寸），pc（12點 1/6英寸），cm（厘米），mm（毫米），in（英寸），不帶單位時默認為px，當取值為百分比時通過父元素的寬高確定。單位可以混用，也就是說可以指定元素的width單位為px，height為pt；父元素單位為mm，子元素為px。
看一個例子，編寫如下的svg：
<svg width="200" height="200" style="border:1px solid #000000"> <rect x="10" y="10" width="100" height="100" style="stroke:blue; fill:blue"> </rect> </svg>
在網頁上會呈現如下效果：
解釋下上面的代碼，設置<svg>元素的寬和高都為200像素，在網頁上就表現為這個svg圖像占據網頁空間的寬200px高200px，再設置樣式：邊框樣式為1像素黑色實線，<rect>元素嵌套在<svg>元素中，表明svg中繪制一個矩形，設置rect元素的x為10，y為10，表示要繪制的矩形的左上角頂點的坐標為(10，10)，設置width為100，height為100，表示矩形的寬高都是100像素，再設置邊框和填充顏色都是藍色。
再來說一下這個viewbox屬性，設置這個屬性相當於給svg圖像設置了一個選區，然后將這個選區填充到整個svg畫布中，最后的你看到的結果就是選區中的圖像放大或縮小的結果。這個屬性有四個值，分別為坐標系統中的x值，y值，寬度，高度，屬性值之間用空格或者是逗號合開。實際上這4個值唯一的確定了一個矩形和矩形的位置，x值和y值是矩形左上角頂點的坐標，寬和高分別是矩形的寬和高，單位為像素，這個矩形就是上述的選區。口說無憑，上實例，編寫以下的代碼：
<!DOCTYPE html> <html> <head> <title>svg</title> </head> <body> <svg width="300" height="300" viewbox="0 0 300 300" style="border:1px solid #000000"> <rect x="10" y="0" width="1" height="1" style="stroke:blue; fill:blue"> </rect> <rect x="10" y="10" width="1px" height="1px" style="stroke:blue; fill:blue"> </rect> <rect x="10" y="20" width="1mm" height="1mm" style="stroke:blue; fill:blue"> </rect> <rect x="10" y="30" width="1cm" height="1cm" style="stroke:blue; fill:blue"> </rect> </svg> <svg width="300" height="300" style="border:1px solid #000000"> <rect x="10" y="0" width="1" height="1" style="stroke:blue; fill:blue"> </rect> <rect x="10" y="10" width="1px" height="1px" style="stroke:blue; fill:blue"> </rect> <rect x="10" y="20" width="1mm" height="1mm" style="stroke:blue; fill:blue"> </rect> <rect x="10" y="30" width="1cm" height="1cm" style="stroke:blue; fill:blue"> </rect> </svg> </body> </html>
在網頁中呈現如下結果：
以上代碼為第一個svg設置了viewbox屬性，但是結果並沒有不同，這是因為我將第一個svg的viewbox屬性設置為了"0 0 300 300"，這表示選區是整個svg圖像，所以並沒有變化，將上述代碼中的第一個svg中的viewbox屬性設置為"0 0 150 150"，結果如下：
很明顯第一個圖像中的每個矩形的長寬均是第二個圖像的兩倍，不信你可以把圖片保存下來用ps測一下。出現這樣的原因是我將第一個圖像的選區設置為寬高均為150像素，左上角頂點為坐標原點的矩形，此矩形正好是圖像的二分之一，經放大后填充在300×300的圖像中，所以圖像放大了二倍。再將上述代碼中的第一個svg中的viewbox屬性設置為"0 0 100 100"，結果如下：
如你所料，第一個圖像中的每個矩形的長寬均是第二個圖像的三倍，好了，吹牛完畢O(∩_∩)O哈哈~