使用HTML5進行SVG矢量圖形繪制的入門教程

2020-03-24 16:22:02

字體：大中小

來源：轉載

供稿：網友

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 Code復制內容到剪貼板
h2 HTML5SVGCircle /h2 svgid= svgelem height= 200 xmlns= http://www.w3.org/2000/svg circleid= redcircle cx= 50 cy= 50 r= 50 fill= red / /svg /body /html
在啟用 HTML5 的最新版 FireFox 中會生成如下結果：

HTML5 - SVG 矩形
下面是一個 SVG 示例的 HTML5 版本，用 rect 標簽繪制一個矩形：XML/HTML Code復制內容到剪貼板
h2 HTML5SVGRectangle /h2 svgid= svgelem height= 200 xmlns= http://www.w3.org/2000/svg rectid= redrect width= 300 height= 100 fill= red / /svg /body /html
在啟用 HTML5 的最新版 FireFox 中會生成如下結果：

HTML5 - SVG 線條
下面是一個 SVG 示例的 HTML5 版本，用 line 標簽繪制一個線條：XML/HTML Code復制內容到剪貼板
h2 HTML5SVGLine /h2 svgid= svgelem height= 200 xmlns= http://www.w3.org/2000/svg linex1= 0 y1= 0 x2= 200 y2= 100 >你可以使用 style 屬性給它設置額外的樣式信息，比如筆畫，填充色，筆畫寬度等等。在啟用 HTML5 的最新版 FireFox 中會生成如下結果：

HTML5 - SVG 橢圓
下面是一個 SVG 示例的 HTML5 版本，用 ellipse 標簽繪制一個橢圓：XML/HTML Code復制內容到剪貼板
h2 HTML5SVGEllipse /h2 svgid= svgelem height= 200 xmlns= http://www.w3.org/2000/svg ellipsecx= 100 cy= 50 rx= 100 ry= 50 fill= red / /svg /body /html
在啟用 HTML5 的最新版 FireFox 中會生成如下結果：

HTML5 - SVG 多邊形
下面是一個 SVG 示例的 HTML5 版本，用 polygon 標簽繪制一個多邊形：XML/HTML Code復制內容到剪貼板
h2 HTML5SVGPolygon /h2 svgid= svgelem height= 200 xmlns= http://www.w3.org/2000/svg polygonpoints= 20,10300,20,170,50 fill= red / /svg /body /html
在啟用 HTML5 的最新版 FireFox 中會生成如下結果：

HTML5 - SVG 折線
下面是一個 SVG 示例的 HTML5 版本，用 polyline 標簽繪制一個折線圖：XML/HTML Code復制內容到剪貼板
h2 HTML5SVGPolyline /h2 svgid= svgelem height= 200 xmlns= http://www.w3.org/2000/svg polylinepoints= 0,00,2020,2020,4040,4040,60 fill= red / /svg /body /html
在啟用 HTML5 的最新版 FireFox 中會生成如下結果：

HTML5 - SVG 漸變
下面是一個 SVG 示例的 HTML5 版本，用 ellipse 標簽繪制一個橢圓，使用 radialGradient 標簽定義一個 SVG 徑向漸變。我們可以以類似的方式用 linearGradient 標簽創建 SVG 線性漸變。XML/HTML Code復制內容到剪貼板
h2 HTML5SVGGradientEllipse /h2 svgid= svgelem height= 200 xmlns= http://www.w3.org/2000/svg defs radialGradientid= gradient cx= 50% cy= 50% r= 50% fx= 50% fy= 50% stopoffset= 0% >在啟用 HTML5 的最新版 FireFox 中會生成如下結果：
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：XHTML教程一

下一篇：html5 progress標簽如何更改進度條顏色？progress進度條詳解