svg入門詳解（實例篇）

1、SVG形狀

SVG有一些預約義的形狀元素，可被開發者使用和操做：

• 矩形
• 圓形
• 橢圓
• 線
• 折線
• 多邊形
• 路徑

2、基本形狀

要想插入一個形狀，你能夠在文檔中建立一個元素。不一樣的元素對應着不一樣的形狀，而且使用不一樣的屬性來定義圖形的大小和位置。

示例代碼：

<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
    <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

    <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
    <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

    <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
    <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"  stroke="orange" fill="transparent" stroke-width="5"/>

    <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"  stroke="green" fill="transparent" stroke-width="5"/>

    <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>
複製代碼

3、座標系統

SVG使用的座標系統或者說網格系統是：以頁面的左上角爲(0,0)座標點，座標以像素爲單位，x軸正方向是向右，y軸正方向是向下。注意，這和你小時候所教的繪圖方式是相反的。可是在HTML文檔中，元素都是用這種方式定位的。

4、SVG實例

（一）矩形

示例代碼及效果：

<svg width="500px" height="500px" style="margin:50px;" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="95" y="95" rx="20" ry="20" width="200" height="200" style="fill:rgb(99,99,99);stroke-width:2;stroke:rgb(33,33,33);fill-opacity:0.1;stroke-opacity:0.9;opacity:0.9;"></rect>
</svg>
複製代碼

解析：
x     矩形左上角的x位置 y     矩形左上角的y位置 rx     圓角的x方位的半徑 ry     圓角的y方位的半徑 width     矩形的寬度 height     矩形的高度 fill     設置對象內部的填充顏色 fill-opacity     控制填充色的不透明度（範圍：0 - 1） stroke     定義矩形邊框的顏色 stroke-opacity     控制描邊的不透明度（範圍：0 - 1） stroke-width     定義矩形邊框的寬度

（二）圓形

示例代碼及效果：

<!--圓形--> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="#FF8C00" />
</svg>
複製代碼

解析： r     圓的半徑 cx     圓點的x座標 cy     圓點的y座標

（三）橢圓

示例代碼及效果：

<!--橢圓-->
<svg width="500px" height="500px" style="margin:50px;" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="275" cy="125" rx="100" ry="50" style="fill:#7D9EC0;stroke:#6B6B6B;stroke-width:2;"></ellipse>
</svg>
複製代碼

解析： cx     橢圓中心的x座標 cy     橢圓中心的y座標 rx     定義的水平半徑 ry     定義的垂直半徑

（四）線條

繪製直線。它取兩個點的位置做爲屬性，指定這條線的起點和終點位置。利用兩點肯定一條直線的原理。

示例代碼及效果：

<!--直線-->
<svg width="600px" height="600px"  version="1.1"  xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="100" y2="100" style="stroke:rgb(99,99,99);stroke-width:2;"></line>
    <line x1="100" y1="100" x2="0" y2="200" style="stroke:rgb(99,99,99);stroke-width:2;"></line>
</svg>
複製代碼

解析： x1     起點的x位置 y1     起點的y位置 x2     終點的x位置 y2     終點的y位置

（五）折線

是一組鏈接在一塊兒的直線。由於它能夠有不少的點，折線的的全部點位置都放在一個points屬性中。

示例代碼及效果：

<!--五星  未填充顏色-->
<svg style="height:300px;width:300px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polygon points="100 10,40 180,190 60,10 60,160 180" style="fill:none;stroke:black;stroke-width:3"/>
</svg>
<!--五星  填充顏色-->
<svg style="height:300px;width:300px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polyline points="100 10,40 180,190 60,10 60,160 180" style="fill:#EE2C2C;stroke:#EE2C2C;stroke-width:3" />
</svg>
</svg>
複製代碼

解析： points     每一個點必須包含2個數字，一個是x座標，一個是y座標。因此點列表 (0,0), (1,1) 和(2,2)能夠寫成這樣：「0 0, 1 1, 2 2」。

（六）多邊形

和折線很像，它們都是由鏈接一組點集的直線構成。不一樣的是， 的路徑在最後一個點處自動回到第一個點。 標籤用來建立含有很多於三個邊的圖形。 多邊形是由直線組成，其形狀是"封閉"的（全部的線條 鏈接起來）。

示例代碼及效果：

<svg width="300px" height="300px" version="1.1"  xmlns="http://www.w3.org/2000/svg">
    <polygon points="220,100 300,210 170,250 123,234" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
</svg>
複製代碼

解析： points     每一個點必須包含2個數字，一個是x座標，一個是y座標。因此點列表 (0,0), (1,1) 和(2,2)能夠寫成這樣：「0 0, 1 1, 2 2」。路徑繪製完後閉合圖形，因此最終的直線將從位置(2,2)鏈接到位置(0,0)。

（七）路徑

path元素是SVG基本形狀中最強大的一個，它不只能建立其餘基本形狀，還能建立更多其餘形狀。你能夠用path元素繪製矩形（直角矩形或者圓角矩形）、圓形、橢圓、折線形、多邊形，以及一些其餘的形狀，例如貝塞爾曲線、2次曲線等曲線。 path元素的形狀是經過屬性d來定義的，屬性d的值是一個「命令+參數」的序列。

每個命令都用一個關鍵字母來表示，好比，字母「M」表示的是「Move to」命令，當解析器讀到這個命令時，它就知道你是打算移動到某個點。跟在命令字母后面的，是你須要移動到的那個點的x和y軸座標。好比移動到(10,10)這個點的命令，應該寫成「M 10 10」。這一段字符結束後，解析器就會去讀下一段命令。每個命令都有兩種表示方式，一種是用大寫字母，表示採用絕對定位。另外一種是用小寫字母，表示採用相對定位

由於屬性d採用的是用戶座標系統，因此不需標明單位

path的實例放到下篇...