如何使用HTML5進(jìn)行SVG矢量圖形替換

這篇文章主要講解了“如何使用HTML5進(jìn)行SVG矢量圖形替換”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“如何使用HTML5進(jìn)行SVG矢量圖形替換”吧！

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

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

SVG在2003年1月14日成為W3C推薦標(biāo)準(zhǔn)，您可以在SVG規(guī)范頁(yè)面中查看最新版本的SVG規(guī)范。

查看SVG文件

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

在HTML5中嵌入SVG HTML5允許我們直接使用__ <svg> ... </ svg>標(biāo)簽嵌入SVG，下面是簡(jiǎn)單的語(yǔ)法：

XML / HTML代碼將內(nèi)容復(fù)制到文本

< svg xmlns = “ http://www.w3.org/2000/svg” >   

...       

</ svg >  

HTML5-SVG圓

下面是一個(gè)SVG示例的HTML5版本，用<circle>標(biāo)簽放置一個(gè)圓：

XML / HTML代碼將內(nèi)容復(fù)制到文本

<！DOCTYPE html >  

<頭>  

< title > SVG </ title >  

< meta charset = “ utf-8” />    

</頭>  

<身體>  

< h3 > HTML5 SVG圈子</ h3 >  

< svg id = “ svgelem” height = “ 200” xmlns = “ http://www.w3.org/2000/svg” >     

    < circle id = “ redcircle” cx = “ 50” cy = “ 50” r = “ 50” fill = “ red” />        

</ svg >  

</ body >  

</ html >  

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

2016219112130340.jpg（223&times;186）

HTML5-SVG矩形

下面是一個(gè)SVG示例的HTML5版本，用<rect>標(biāo)簽放置一個(gè)矩形：

XML / HTML代碼將內(nèi)容復(fù)制到文本

<！DOCTYPE html >  

<頭>  

< title > SVG </ title >  

< meta charset = “ utf-8” />    

</頭>  

<身體>  

< h3 > HTML5 SVG矩形</ h3 >  

< svg id = “ svgelem” height = “ 200” xmlns = “ http://www.w3.org/2000/svg” >     

    < rect id = “ redrect”寬度= “ 300”高度= “ 100” fill = “ red” />       

</ svg >  

</ body >  

</ html >  

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

2016219112200272.jpg（316&times;152）

HTML5-SVG

線條下面是一個(gè)SVG示例的HTML5版本，用<line>標(biāo)簽放置一個(gè)線條：

XML / HTML代碼將內(nèi)容復(fù)制到文本

<！DOCTYPE html >  

<頭>  

< title > SVG </ title >  

< meta charset = “ utf-8” />    

</頭>  

<身體>  

< h3 > HTML5 SVG行</ h3 >  

< svg id = “ svgelem” height = “ 200” xmlns = “ http://www.w3.org/2000/svg” >     

    <行x1 = “ 0” y1 = “ 0” x2 = “ 200” y2 = “ 100”      

          style = “ stroke：red; stroke-width：2” />  

</ svg >  

</ body >  

</ html >  

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

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

2016219112220725.jpg（217&times;159）

HTML5-SVG橢圓

下面是一個(gè)SVG示例的HTML5版本，用<ellipse>標(biāo)簽放置一個(gè)橢圓：

XML / HTML代碼將內(nèi)容復(fù)制到文本

<！DOCTYPE html >  

<頭>  

< title > SVG </ title >  

< meta charset = “ utf-8” />    

</頭>  

<身體>  

< h3 > HTML5 SVG橢圓</ h3 >  

< svg id = “ svgelem” height = “ 200” xmlns = “ http://www.w3.org/2000/svg” >     

    <橢圓cx = “ 100” cy = “ 50” rx = “ 100” ry = “ 50” fill = “紅色” />        

</ svg >  

</ body >  

</ html >  

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

2016219112240763.jpg（225&times;148）

HTML5-SVG

頂部下面是一個(gè)SVG示例的HTML5版本，用<polygon>標(biāo)簽放置一個(gè)附加：

XML / HTML代碼將內(nèi)容復(fù)制到文本

<！DOCTYPE html >  

<頭>  

< title > SVG </ title >  

< meta charset = “ utf-8” />    

</頭>  

<身體>  

< h3 > HTML5 SVG多邊形</ h3 >  

< svg id = “ svgelem” height = “ 200” xmlns = “ http://www.w3.org/2000/svg” >     

    <多邊形點(diǎn)= “ 20,10 300,20，170,50”填充= “紅色” />      

</ svg >  

</ body >  

</ html >  

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

2016219112258796.jpg（310&times;118）

HTML5-SVG折線

下面是一個(gè)SVG示例的HTML5版本，用<polyline>標(biāo)簽放置一個(gè)折線圖：

XML / HTML代碼將內(nèi)容復(fù)制到文本

<！DOCTYPE html >  

<頭>  

< title > SVG </ title >  

< meta charset = “ utf-8” />    

</頭>  

<身體>  

< h3 > HTML5 SVG折線</ h3 >  

< svg id = “ svgelem” height = “ 200” xmlns = “ http://www.w3.org/2000/svg” >     

 <折線點(diǎn)= “ 0,0 0,20 20,20 20,40 40,40 40,60”填充= “紅色” />     

</ svg >  

</ body >  

</ html >  

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

2016219112318049.jpg（245&times;114）

HTML5-SVG

滾動(dòng)下方是一個(gè)SVG示例的HTML5版本，用<ellipse>標(biāo)簽放置一個(gè)橢圓，使用<radialGradient>標(biāo)簽定義一個(gè)SVG徑向尺寸。

我們可以以類似的方式用<linearGradient>標(biāo)簽創(chuàng)建SVG線性變量。

XML / HTML代碼將內(nèi)容復(fù)制到文本

<！DOCTYPE html >  

<頭>  

< title > SVG </ title >  

< meta charset = “ utf-8” />    

</頭>  

<身體>  

< h3 > HTML5 SVG漸變橢圓</ h3 >  

< svg id = “ svgelem” height = “ 200” xmlns = “ http://www.w3.org/2000/svg” >     

   < defs >  

      < radialGradient id = “ gradient” cx = “ 50％” cy = “ 50％” r = “ 50％”      

      fx = “ 50％” fy = “ 50％” >   

      < Stop offset = “ 0％” style =“ stop-color：rgb（200,200,200）;     

      stop-opacity：0“ />  

      < Stop offset = “ 100％” style =“ stop-color：rgb（0,0,255）;     

      stop-opacity：1“ />  

      </ radialGradient >  

   </ defs >  

   <橢圓cx = “ 100” cy = “ 50” rx = “ 100” ry = “ 50”        

      樣式= “ fill：url（#gradient）” />   

</ svg >  

</ body >  

</ html >  

感謝各位的閱讀，以上就是“如何使用HTML5進(jìn)行SVG矢量圖形替換”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)如何使用HTML5進(jìn)行SVG矢量圖形替換這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！