使用HTML5進行SVG向量圖形繪製的入門教學_html5教學技巧

VG 表示可伸縮向量圖形，這是一門用於描述 2D 圖形的語言，圖形應用使用 XML 編寫，然後 XML 由 SVG 閱讀器程式呈現。

SVG 主要用於向量類型的圖表，例如圓餅圖，X，Y 座標系統中的二維圖等等。

SVG 在 2003 年 1 月 14 日成為 W3C 推薦標準，你可以在 SVG 規範 頁面中查看最新版本的 SVG 規範。

查看 SVG 檔案
大多數 Web 瀏覽器都可以顯示 SVG，就像它們可以顯示 PNG，GIF 以及 JPG 圖形。 IE 使用者可能需要安裝 Adob​​​​e SVG 閱讀器 以便能夠在瀏覽器中查看 SVG。

在 HTML5 中嵌入 SVG
HTML5 允許我們直接使用 __ 標籤嵌入 SVG，以下是簡單的語法：

XML/HTML Code複製內容到剪貼簿

1. svg xmlns=xmlns="http://www. w3.org/2000/svg">
2.   
3. ...        svg
>

  

HTML5 - SVG 圓

下面是一個 SVG 範例的 HTML5 版本，用 標籤繪製一個圓：

XML/HTML Code複製內容到剪貼簿

1. html>  
2. 頭>  
3. 標題>SVG標題>  
4. 元 字符集=字符集=字符集 
/>
5.    頭
>
6.    身體
>
7.    h2>HTML5 SVG 圓 h2
>
8.    svg id=id= 🎜> 高度="200" 「http://www.w3.org/2000/svg」>
  
9.     圓圈 id=“紅圈”  cx="50" cy cycycycycycycycycycycycycycycy「50」 r
=
10. 「50」 =「紅」 
/>
11.    svg
>
12.    身體
>

  

html
>

  

在啟用 HTML5 的最新版本 FireFox 中會產生以下結果： HTML5 - SVG 曲線下面是 SVG 範例的 HTML5 版本，用 ; 標籤大致上一個： XML/HTML 程式碼將內容複製到剪貼簿

1. html>  
2. 頭>  
3. 標題>SVG標題>  
4. 元 字符集=字符集=字符集 
/>
5.    頭
>
6.    身體
>
7.    h2>HTML5 SVG 矩形 h2
>
8.    svg id=id= 🎜> 高度="200" 「http://www.w3.org/2000/svg」>
  
9.     矩形 id="redrect"  寬度="300" 高 「100」 填色=「紅」「紅色」
   svg
10. >  
身體
11. >  
html

>

  

在啟用 HTML5 的最新版本 FireFox 中會產生以下結果：

HTML5 - SVG 線條下面是一個 SVG 範例的 HTML5 版本，用 ; 標籤稀疏一個線條：

XML/HTML 程式碼將內容複製到剪貼簿

1. html>  
2. 頭>  
3. 標題>SVG標題>  
4. 元 字符集=字符集=字符集 
/>
5.    頭
>
6.    身體
>
7.    h2>HTML5 SVG 線HTML5 SVG 線
h2
8. >   svg id=id= 🎜> 高度="200" 「http://www.w3.org/2000/svg」
>
9.        行 x1="0"  y1="0" x >「200」 y2=「100」 
10.           樣式="筆畫:紅色;="筆畫:紅色;
11. svg>  
12. 身體>  
13. html>  

你可以使用 style 屬性為它設定額外的樣式訊息，例如筆畫，填滿顏色，筆畫寬度等等。

在啟用 HTML5 的最新版本 FireFox 中會產生以下結果：

HTML5 - SVG 橢圓
下面是一個 SVG 範例的 HTML5 版本，用 ; 標籤相當於一個平坦：

XML/HTML 程式碼

將內容複製到剪貼簿

1. html>  
2. 頭>  
3. 標題>SVG標題>  
4. 元 字符集=字符集=字符集 
/>
5.    頭
>
6.    身體
>
7.    h2>HTML5 SVG 橢圓 h2
>
8.    svg id=id= 🎜> 高度="200" 「http://www.w3.org/2000/svg」>
  
9.     橢圓 cx="100"  cy="50" 「100」 ry=「50」 =「紅」 />  
10. svg>  
11. 身體>  
12. html>  

在啟用 HTML5 的最新版本 FireFox 中會產生以下結果：

HTML5 - SVG 操作

下面是一個 SVG 範例的 HTML5 版本，用 ; 標籤相當於一個營業：

XML/HTML 程式碼

將內容複製到剪貼簿

1. html>  
2. 頭>  
3. 標題>SVG標題>  
4. 元 字符集=字符集=字符集 
/>
5.    頭
>
6.    身體
>
7.    h2>HTML5 SVG 多邊形HTML5 SVG 多邊形 h2
8. >   svg id=id= 🎜> 高度="200" 「http://www.w3.org/2000/svg」>
9.        多邊形  點 300,20, 170,50" 填入=「紅」=「紅」
>
10.    svg
>
11.    身體
>
12.    html
>

  

在啟用 HTML5 的最新版本 FireFox 中會產生以下結果：

HTML5 - SVG 折線

下面是一個 SVG 範例的 HTML5 版本，用 ; 標籤相當一個折線圖：

XML/HTML 程式碼將內容複製到剪貼簿

1. html>  
2. 頭>  
3. 標題>SVG標題>  
4. 元 字符集=字符集=字符集 
/>
5.    頭
>
6.    身體
>
7.    h2>HTML5 SVG 折線 h2>
8.    svg id=id= 🎜> 高度="200" 「http://www.w3.org/2000/svg」>  
9.  折線 點=點= 0,20 20,20 20,40 40,40 40,60" 填充=填充=
「紅色」
10. =「紅色」。 > />  
11. svg>  
12. 身體>  

html
>

  

在啟用 HTML5 的最新版本 FireFox 中會產生以下結果：

HTML5 - SVG 更新

下面是一個 SVG 範例的 HTML5 版本，用 ; 標籤相當於一個平面圖，使用 標籤定義了 SVG 過渡。 我們可以以類似的方式使用 標籤建立 SVG 線性漸層。 XML/HTML 程式碼將內容複製到剪貼簿

1. html>  
2. 頭>  
3. 標題>SVG標題>  
4. 元 字符集=字符集=字符集 
/>
5.    頭
>
6.    身體
>
7.    h2>HTML5 SVG 漸變橢圓h2
>
8.    svg id=id= 🎜> 高度="200" 「http://www.w3.org/2000/svg」>
  
9.    defs>
  
10.       徑向漸變 id="漸變"  cx="50%" cy = 「50%」 r
=
11. 「50%」       fx="50%" "50%" 「50%」
12. >         停止 偏移 偏移 
13. 偏移" 樣式="stop-color:rgb(200,200,200);   
14.       stop-opacity:0"/>         停止 偏移 
15. 偏移 偏移 
16. 樣式="stop-color:rgb(0,0,255);          stop-opacity:1"/>  
17.       徑向漸層> 
   defs>  
18.    ellipse cx cx cx 🎜> cy="50" r "100" ry=
19. "50"     🎜>       style="fill:url(#gradient)" 🎜>  
20. svg>  
21. body>  
22. html>  

在啟用 HTML5 的最新版 FireFox 中會產生以下結果：