溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“如何使用HTML5進行SVG矢量圖形替換”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何使用HTML5進行SVG矢量圖形替換”吧！
VG表示可伸縮矢量圖形，這是一門用于描述2D圖形的語言，圖形應用使用XML編寫，然后XML由SVG閱讀器程序呈現。
SVG主要用于矢量類型的圖表，某些餅圖，X，Y坐標系統中的二維圖等等。
SVG在2003年1月14日成為W3C推薦標準，您可以在SVG規范頁面中查看最新版本的SVG規范。
查看SVG文件
大多數Web瀏覽器都可以顯示SVG，就像它們可以顯示PNG，GIF以及JPG圖形。IE用戶可能需要安裝Adobe SVG閱讀器能夠使瀏覽器中查看SVG。
在HTML5中嵌入SVG HTML5允許我們直接使用__ <svg> ... </ svg>標簽嵌入SVG，下面是簡單的語法：
XML / HTML代碼將內容復制到文本
< svg xmlns = “ http://www.w3.org/2000/svg” >
...
</ svg >
HTML5-SVG圓
下面是一個SVG示例的HTML5版本，用<circle>標簽放置一個圓：
XML / HTML代碼將內容復制到文本
<！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中會生成如下結果：
2016219112130340.jpg（223×186）
HTML5-SVG矩形
下面是一個SVG示例的HTML5版本，用<rect>標簽放置一個矩形：
XML / HTML代碼將內容復制到文本
<！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中會生成如下結果：
2016219112200272.jpg（316×152）
HTML5-SVG
線條下面是一個SVG示例的HTML5版本，用<line>標簽放置一個線條：
XML / HTML代碼將內容復制到文本
<！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屬性給它設置額外的樣式信息，某些筆畫，填充色，筆畫寬度等等。
在啟用HTML5的最新版本FireFox中會生成如下結果：
2016219112220725.jpg（217×159）
HTML5-SVG橢圓
下面是一個SVG示例的HTML5版本，用<ellipse>標簽放置一個橢圓：
XML / HTML代碼將內容復制到文本
<！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中會生成如下結果：
2016219112240763.jpg（225×148）
HTML5-SVG
頂部下面是一個SVG示例的HTML5版本，用<polygon>標簽放置一個附加：
XML / HTML代碼將內容復制到文本
<！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” >
<多邊形點= “ 20,10 300,20，170,50”填充= “紅色” />
</ svg >
</ body >
</ html >
在啟用HTML5的最新版本FireFox中會生成如下結果：
2016219112258796.jpg（310×118）
HTML5-SVG折線
下面是一個SVG示例的HTML5版本，用<polyline>標簽放置一個折線圖：
XML / HTML代碼將內容復制到文本
<！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” >
<折線點= “ 0,0 0,20 20,20 20,40 40,40 40,60”填充= “紅色” />
</ svg >
</ body >
</ html >
在啟用HTML5的最新版本FireFox中會生成如下結果：
2016219112318049.jpg（245×114）
HTML5-SVG
滾動下方是一個SVG示例的HTML5版本，用<ellipse>標簽放置一個橢圓，使用<radialGradient>標簽定義一個SVG徑向尺寸。
我們可以以類似的方式用<linearGradient>標簽創建SVG線性變量。
XML / HTML代碼將內容復制到文本
<！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進行SVG矢量圖形替換”的內容了，經過本文的學習后，相信大家對如何使用HTML5進行SVG矢量圖形替換這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
