使用HTML5進(jìn)行SVG矢量圖形繪制的入門教程

VG 表示可伸縮矢量圖形,這是一門用于描述 2D 圖形的語言,圖形應(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ī)范 頁面中查看最新版本的 SVG 規(guī)范。
查看 SVG 文件
大多數(shù) Web 瀏覽器都可以顯示 SVG,就像它們可以顯示 PNG,GIF 以及 JPG 圖形。IE 用戶可能需要安裝 Adobe SVG 閱讀器 以便能夠在瀏覽器中查看 SVG。
在 HTML5 中嵌入 SVG
HTML5 允許我們直接使用 __<svg>...</svg> 標(biāo)簽嵌入 SVG,下面是簡單的語法:
- <svg xmlns="http://www.w3.org/2000/svg">
- ...
- </svg>
HTML5 - SVG 圓
下面是一個 SVG 示例的 HTML5 版本,用 <circle> 標(biāo)簽繪制一個圓:
- <!DOCTYPE html>
- <head>
- <title>SVG</title>
- <meta charset="utf-8" />
- </head>
- <body>
- <h2>HTML5 SVG Circle</h2>
- <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 中會生成如下結(jié)果:
HTML5 - SVG 矩形
下面是一個 SVG 示例的 HTML5 版本,用 <rect> 標(biāo)簽繪制一個矩形:
- <!DOCTYPE html>
- <head>
- <title>SVG</title>
- <meta charset="utf-8" />
- </head>
- <body>
- <h2>HTML5 SVG Rectangle</h2>
- <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
- <rect id="redrect" width="300" height="100" fill="red" />
- </svg>
- </body>
- </html>
在啟用 HTML5 的最新版 FireFox 中會生成如下結(jié)果:
HTML5 - SVG 線條
下面是一個 SVG 示例的 HTML5 版本,用 <line> 標(biāo)簽繪制一個線條:
- <!DOCTYPE html>
- <head>
- <title>SVG</title>
- <meta charset="utf-8" />
- </head>
- <body>
- <h2>HTML5 SVG Line</h2>
- <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
- <line x1="0" y1="0" x2="200" y2="100"
- style="stroke:red;stroke-width:2"/>
- </svg>
- </body>
- </html>
你可以使用 style 屬性給它設(shè)置額外的樣式信息,比如筆畫,填充色,筆畫寬度等等。
在啟用 HTML5 的最新版 FireFox 中會生成如下結(jié)果:
HTML5 - SVG 橢圓
下面是一個 SVG 示例的 HTML5 版本,用 <ellipse> 標(biāo)簽繪制一個橢圓:
- <!DOCTYPE html>
- <head>
- <title>SVG</title>
- <meta charset="utf-8" />
- </head>
- <body>
- <h2>HTML5 SVG Ellipse</h2>
- <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
- <ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
- </svg>
- </body>
- </html>
在啟用 HTML5 的最新版 FireFox 中會生成如下結(jié)果:
HTML5 - SVG 多邊形
下面是一個 SVG 示例的 HTML5 版本,用 <polygon> 標(biāo)簽繪制一個多邊形:
- <!DOCTYPE html>
- <head>
- <title>SVG</title>
- <meta charset="utf-8" />
- </head>
- <body>
- <h2>HTML5 SVG Polygon</h2>
- <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
- <polygon points="20,10 300,20, 170,50" fill="red" />
- </svg>
- </body>
- </html>
在啟用 HTML5 的最新版 FireFox 中會生成如下結(jié)果:
HTML5 - SVG 折線
下面是一個 SVG 示例的 HTML5 版本,用 <polyline> 標(biāo)簽繪制一個折線圖:
- <!DOCTYPE html>
- <head>
- <title>SVG</title>
- <meta charset="utf-8" />
- </head>
- <body>
- <h2>HTML5 SVG Polyline</h2>
- <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
- <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />
- </svg>
- </body>
- </html>
在啟用 HTML5 的最新版 FireFox 中會生成如下結(jié)果:
HTML5 - SVG 漸變
下面是一個 SVG 示例的 HTML5 版本,用 <ellipse> 標(biāo)簽繪制一個橢圓,使用 <radialGradient> 標(biāo)簽定義一個 SVG 徑向漸變。
我們可以以類似的方式用 <linearGradient> 標(biāo)簽創(chuàng)建 SVG 線性漸變。
- <!DOCTYPE html>
- <head>
- <title>SVG</title>
- <meta charset="utf-8" />
- </head>
- <body>
- <h2>HTML5 SVG Gradient Ellipse</h2>
- <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>
- <ellipse cx="100" cy="50" rx="100" ry="50"
- style="fill:url(#gradient)" />
- </svg>
- </body>
- </html>
在啟用 HTML5 的最新版 FireFox 中會生成如下結(jié)果:
相關(guān)文章
HTML5+SVG實現(xiàn)餅狀圖形進(jìn)度條特效源碼
HTML5+SVG實現(xiàn)餅狀圖形進(jìn)度條特效源碼是一款基于jQuery+HTML5實現(xiàn)的可以在頁面中渲染出帶動畫效果的SVG餅狀圖形,適合用于制作進(jìn)度顯示,加載進(jìn)度等。對本段代碼感興趣的朋2016-02-16- 這篇文章主要介紹了HTML5新特性之用SVG繪制的微信logo 的相關(guān)資料,需要的朋友可以參考下2016-02-03
- 本源碼是一款很炫的html5 svg打開圣誕禮盒和下雪動畫效果。點擊禮盒后會飛出許多icon禮物,之后會有雪花從屏幕上方飄落2015-12-09
- SVG是Scalable Vector Graphics的縮寫,意為可縮放矢量圖形。1998年,萬維網(wǎng)聯(lián)盟成立了一個工作組,研發(fā)一種通過XML來表現(xiàn)矢量圖形的技術(shù)——SVG!由于SVG也是一種XML文件2015-11-27
基于html5實現(xiàn)的svg圖標(biāo)手機(jī)菜單動態(tài)特效源碼
是一段基于HTML5實現(xiàn)的適合手機(jī)端展開收縮的動態(tài)導(dǎo)航菜單內(nèi)容展示效果代碼,本段代碼適應(yīng)于所有網(wǎng)頁使用,有興趣的朋友們可以前來下載使用2015-11-25html5基于svg實現(xiàn)圓形進(jìn)度統(tǒng)計動畫特效源碼
這是一款html5基于svg實現(xiàn)圓形進(jìn)度統(tǒng)計動畫特效源碼,運行時可見統(tǒng)計進(jìn)度呈現(xiàn)圓形展開及進(jìn)度條顏色漸變的效果2015-11-19- 基于HTML5 SVG制作漢堡包菜單按鈕分段動畫效果,需要的童鞋直接下載源碼哦。2015-11-18
- 這篇文章主要介紹了深入解析HTML5使用SVG圖像時的viewBox屬性用法,包括一些響應(yīng)式設(shè)計相關(guān)的內(nèi)容,需要的朋友可以參考下2015-09-02
基于HTML5 SVG響應(yīng)式路徑過渡動畫幻燈片特效源碼
這是一款基于HTML5 SVG制作的路徑過渡動畫幻燈片特效的代碼。該幻燈片特效使用SVG路徑來剪裁幻燈片中的圖片,制作出幻燈片切換時不規(guī)則的圖形變換效果2015-09-01HTML5 SVG和CSS3實現(xiàn)的表單浮動標(biāo)簽特效源碼
是一段實現(xiàn)了12中非常炫酷的表單浮動標(biāo)簽特效代碼,本段代碼適應(yīng)于所有網(wǎng)頁使用,有興趣的朋友們可以前來下載使用2015-04-10