這篇文章主要介紹了如何使用HTML5進行SVG矢量圖形繪制，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

專注于為中小企業(yè)提供成都網(wǎng)站制作、網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)貢嘎免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了超過千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

VG 表示可伸縮矢量圖形，這是一門用于描述 2D 圖形的語言，圖形應(yīng)用使用 XML 編寫，然后 XML 由 SVG 閱讀器程序呈現(xiàn)。

SVG 主要用于矢量類型的圖表，比如餅圖，X，Y 坐標系統(tǒng)中的二維圖等等。

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

查看 SVG 文件
大多數(shù) Web 瀏覽器都可以顯示 SVG，就像它們可以顯示 PNG，GIF 以及 JPG 圖形。IE 用戶可能需要安裝 Adobe SVG 閱讀器 以便能夠在瀏覽器中查看 SVG。

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

  
...       

HTML5 - SVG 圓
下面是一個 SVG 示例的 HTML5 版本，用 標簽繪制一個圓：

  
  
  
  
  
  
HTML5 SVG Circle
  
  
      
  
  

在啟用 HTML5 的最新版 FireFox 中會生成如下結(jié)果：

HTML5 - SVG 矩形
下面是一個 SVG 示例的 HTML5 版本，用 標簽繪制一個矩形：

  
  
  
  
  
  
HTML5 SVG Rectangle
  
  
      
  
  

在啟用 HTML5 的最新版 FireFox 中會生成如下結(jié)果：

HTML5 - SVG 線條
下面是一個 SVG 示例的 HTML5 版本，用 標簽繪制一個線條：

  
  
  
  
  
  
HTML5 SVG Line
  
  
      
  
  

你可以使用 style 屬性給它設(shè)置額外的樣式信息，比如筆畫，填充色，筆畫寬度等等。

在啟用 HTML5 的最新版 FireFox 中會生成如下結(jié)果：

HTML5 - SVG 橢圓
下面是一個 SVG 示例的 HTML5 版本，用 標簽繪制一個橢圓：

  
  
  
  
  
  
HTML5 SVG Ellipse
  
  
      
  
  

在啟用 HTML5 的最新版 FireFox 中會生成如下結(jié)果：

HTML5 - SVG 多邊形
下面是一個 SVG 示例的 HTML5 版本，用 標簽繪制一個多邊形：

  
  
  
  
  
  
HTML5 SVG Polygon
  
  
      
  
  

在啟用 HTML5 的最新版 FireFox 中會生成如下結(jié)果：

HTML5 - SVG 折線
下面是一個 SVG 示例的 HTML5 版本，用 標簽繪制一個折線圖：

  
  
  
  
  
  
HTML5 SVG Polyline
  
  
   
  
  

在啟用 HTML5 的最新版 FireFox 中會生成如下結(jié)果：

HTML5 - SVG 漸變
下面是一個 SVG 示例的 HTML5 版本，用 標簽繪制一個橢圓，使用 標簽定義一個 SVG 徑向漸變。

我們可以以類似的方式用 標簽創(chuàng)建 SVG 線性漸變。

  
  
  
  
  
  
HTML5 SVG Gradient Ellipse
  
  
     
        
        
        
        
     
     
  
  

在啟用 HTML5 的最新版 FireFox 中會生成如下結(jié)果：

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何使用HTML5進行SVG矢量圖形繪制”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!