SVG 即 Scalable Vector Graphics，是一種用來(lái)繪制矢量圖的 HTML5 標(biāo)簽。你只需定義好XML屬性，就能獲得一致的圖像元素。
使用SVG之前先將標(biāo)簽加入到HTML body中。就像其他的HTML標(biāo)簽一樣，你可以為SVG標(biāo)簽為之添加ID屬性。也可以為之添加css樣式，例如“border-style:solid;border-width:2px;”。SVG標(biāo)簽跟其它的HTML標(biāo)簽有通用的屬性。你可以用height="100px" width="200px" 為其添加高度和寬度。
現(xiàn)在就將SVG元素加入到我們HTML代碼中，SVG提供很多繪圖形狀，例如線條、圓、多邊形等。
SVG線條：
SVG線條用標(biāo)簽定義，在此標(biāo)簽內(nèi)你還可以定義其他的屬性。
該標(biāo)簽包括像起點(diǎn)坐標(biāo)(x1,y1)和終點(diǎn)坐標(biāo)(x2,y2)這樣的屬性。指定x1,y1,x2,y2值來(lái)設(shè)定起點(diǎn)終點(diǎn)坐標(biāo)。在指定好坐標(biāo)后，可以為之添加一些樣式，在style屬性中使用“stroke:Green;”為線條指定顏色。同樣你也可以用stroke-width:2為線條設(shè)置寬度。
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
</head>
<body>
<h2>HTML5 SVG Line Example</h2>
<svg id="svgLineTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg">
<!--<line x1="0" y1="0" x2="50" y2="200" style="stroke:rgb(100,100,0);stroke-width:5"/>-->
<line x1="10" y1="20" x2="100" y2="200" style="stroke:Green;stroke-width:2"/>
</svg>
</body>
</html>
SVG畫圓：
SVG提供了一種不同的標(biāo)簽來(lái)畫圓。正如你看到的下面代碼，circle有個(gè)id為myCircle。為了定義圓的中心以及半徑，使用cx="55" cy="55"以及r="50"屬性分別定義。使用fill="#219E3E"為圓填充顏色。同樣你可以用stroke="#17301D" stroke-width="2"定義圓周線條顏色和寬度。
代碼2:使用SVG畫圓
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
</head>
<body>
<h2>HTML5 SVG Circle Example</h2>
<svg id="svgCircleTutorial" height="250" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="55" cy="55" r="50" fill="#219E3E" stroke="#17301D" stroke-width="2" />
</svg>
</body>
</html>
SVG矩形:
同樣的使用標(biāo)簽來(lái)畫矩形，我們同樣設(shè)置了 id 屬性 “myRectangle” ,用 width="300" height="100" 定義高寬，使用 fills 屬性定義填充顏色。用 strock 定義邊框。還有一點(diǎn)需要注意，我用 fill-opacity="0.5" stroke-opacity="0.5" 為 stroke 和 filling 都添加了透明度。
代碼3:SVG畫矩形
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Rectangle Example</h2>
<svg id="svgRectangleTutorial" height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="myRectangle" width="300" height="100" stroke="#17301D" stroke-width="2" fill="#0E4E75" fill-opacity="0.5" stroke-opacity="0.5"/>
</svg>
</body>
</html>
SVG橢圓：
我們同樣是用標(biāo)簽來(lái)繪制橢圓。設(shè)置其 id="myEllipse" ，給定起中心坐標(biāo) cx="120"cy="60"，長(zhǎng)軸短軸半徑 rx="100" ry="50",并用設(shè)置填充顏色、邊框?qū)挾纫约斑吙蝾伾玸tyle="fill:#3F5208;stroke:black;stroke-width:3"。
代碼4:SVG畫橢圓
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Ellipse Example</h2>
<svg id="svgEllipseTutorial" height="150" xmlns="http://www.w3.org/2000/svg">
<ellipse id="myEllipse" cx="120" cy="60" rx="100" ry="50" style="fill:#3F5208;stroke:black;stroke-width:3"/>
</svg>
</body>
</html>
SVG多邊形：
我們使用特定標(biāo)簽繪制多邊形,points屬性用來(lái)定義多邊形的幾個(gè)頂點(diǎn)，用左邊對(duì)來(lái)定義，形如 points="10,10 75,150 150,60" ，這里定義了三個(gè)頂點(diǎn)(10,10),(75,150),(150,60)。同上面一樣，用 style="fill:#63BCF7;stroke:black;stroke-width:3" 定義多邊形填充顏色、邊框以及邊框?qū)挾取?/p>
代碼5：SVG畫多邊形
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polygon Example</h2>
<svg id="svgPolygonTutorial" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon id="myPolygon" points="10,10 75,150 150,60" style="fill:#63BCF7;stroke:black;stroke-width:3"/>
</svg>
</body>
</html>
