一、將svg嵌入到html中
svg是指可伸縮矢量圖形，它使用XML格式定義圖像。在html中可以使用<svg>標簽直接嵌入svg代碼，例如：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"> </svg>
svg標簽中的屬性：
- version：表示svg的版本，目前只能有1.0、1.1兩種
- xmlns="http://www.w3.org/2000/svg"：固定值，表示命名空間
- xmlns:xlink="http://www.w3.org/1999/xlink"：固定值，表示命名空間
- xml:space="preserve"：保留所有的空格、TAB、回車鍵
二、svg中的形狀
svg提供了一些預定義的形狀，例如：矩形(rect)、圓形(circle)、橢圓(ellipse)、線(line)、折線(polyline)、多邊形(polygon)、路徑(path)等，你可以像下面這樣繪制一個圓角矩形：
<svg width="200" height="200" style="border:solid 1px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"> <rect x="10" y="10" rx="15" ry="15" width="80" height="80" style="fill:green;stroke:grey;stroke-width:3px"/> </svg>
效果如下：
三、svg圖形的樣式
在svg中，可以使用被提供的屬性來定義樣式，也可以使用css定義樣式，不過建議使用后一種。
<svg width="200" height="200" style="border:solid 1px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"> <rect x="10" y="10" rx="15" ry="15" width="80" height="80" fill="green" stroke="grey" stroke-width="3px" /> </svg>
以上代碼的效果跟前面的相同。
svg圖形可使用的css樣式包括以下幾種：
| CSS屬性 | 描述 |
|---|---|
| fill | 設置圖形的填充顏色 |
| fill-opacity | 設置圖形填充顏色的透明度 |
| fill-rule | 設置圖形的填充規則 |
| marker | 設置這個圖形上沿直線（邊）使用的marker |
| marker-start | 設置這個圖形上沿直線（邊）使用的開始marker |
| marker-mid | 設置這個圖形上沿直線（邊）使用的中間marker |
| marker-end | 設置這個圖形上沿直線（邊）使用的結束marker |
| stroke | 設置圖形的描邊顏色 |
| stroke-dasharray | 設置使用虛線來對圖形進行描邊 |
| stroke-dashoffset | 設置圖形描邊虛線的偏移值 |
| stroke-linecap | 設置描邊線條線頭的類型。可選擇有round, butt 和 square |
| stroke-miterlimit | 設置描邊的斜接限制 |
| stroke-opacity | 設置描邊的透明度 |
| stroke-width | 設置描邊的寬度 |
| text-rendering | 設置描邊的text-rendering屬性 |
四、svg線條動畫
1、stroke-dasharray屬性：使用虛線來對圖形描邊。如果只有一個參數"a"，則先畫"a"px的實線，再畫"a"px的虛線；如果有兩個參數"a,b"，第一個參數"a"代表實線的長度，第二參數"b"代表虛線的長度；如果有三個參數"a,b,c"，這種情況下，數字會循環兩次，首先畫"a"px實線，"b"px虛線，"c"px實線，然后畫"a"px虛線，"b"px實線，"c"px虛線。
<svg width="200" height="200" style="border:solid 1px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"> <line x1="20" y1="30" x2="165" y2="30" style="stroke:red;stroke-width:3px;stroke-dasharray:5" /> <line x1="20" y1="60" x2="165" y2="60" style="stroke:green;stroke-width:3px;stroke-dasharray:10,5" /> <line x1="20" y1="90" x2="165" y2="90" style="stroke:blue;stroke-width:3px;stroke-dasharray:5,10,5" /> </svg>
效果如下：
2、stroke-dashoffset屬性：設置描邊虛線的偏移值。
<svg width="200" height="200" style="border:solid 1px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"> <line x1="20" y1="30" x2="165" y2="30" style="stroke:red;stroke-width:3px;stroke-dasharray:15,5;stroke-dashoffset:0" /> <line x1="20" y1="60" x2="165" y2="60" style="stroke:red;stroke-width:3px;stroke-dasharray:15,5;stroke-dashoffset:5" /> <line x1="20" y1="90" x2="165" y2="90" style="stroke:red;stroke-width:3px;stroke-dasharray:15,5;stroke-dashoffset:10" /> </svg>
效果如下：
當實線和虛線的長度足夠大時，配合stroke-dasharray和stroke-dashoffset屬性可以畫出長短不一的實線：
最后，stroke-dasharray和stroke-dashoffset屬性同時也是css樣式，可以用css animation動畫控制stroke-dashoffset屬性的值，動態改變線條的長度。
示例：
另外，你也可以使用svg的path路徑創建復雜圖案，實現更酷炫的動畫；