欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

<tr id="r74p0"></tr>

<pre id="r74p0"></pre>

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

極客學(xué)院 發(fā)布時(shí)間：2016-02-19 11:12:26 作者：佚名

我要評(píng)論

這篇文章主要介紹了使用HTML5進(jìn)行SVG矢量圖形繪制的入門教程,包括基本圖形的繪制和簡(jiǎn)單的漸變效果等介紹,注意舊版本IE對(duì)其的支持并不好,需要的朋友可以參考下

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 Code復(fù)制內(nèi)容到剪貼板

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

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!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 中會(huì)生成如下結(jié)果：
2016219112130340.jpg (223×186)

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!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 中會(huì)生成如下結(jié)果：
2016219112200272.jpg (316×152)

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!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 中會(huì)生成如下結(jié)果：
2016219112220725.jpg (217×159)

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!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 中會(huì)生成如下結(jié)果：
2016219112240763.jpg (225×148)

HTML5 - SVG 多邊形
下面是一個(gè) SVG 示例的 HTML5 版本，用 <polygon> 標(biāo)簽繪制一個(gè)多邊形：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!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 中會(huì)生成如下結(jié)果：
2016219112258796.jpg (310×118)

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!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 中會(huì)生成如下結(jié)果：
2016219112318049.jpg (245×114)

HTML5 - SVG 漸變
下面是一個(gè) SVG 示例的 HTML5 版本，用 <ellipse> 標(biāo)簽繪制一個(gè)橢圓，使用 <radialGradient> 標(biāo)簽定義一個(gè) SVG 徑向漸變。

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!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 中會(huì)生成如下結(jié)果：
2016219112338977.jpg (319×157)

Tag：HTML5 SVG 矢量圖

相關(guān)文章

HTML5+SVG實(shí)現(xiàn)餅狀圖形進(jìn)度條特效源碼
HTML5+SVG實(shí)現(xiàn)餅狀圖形進(jìn)度條特效源碼是一款基于jQuery+HTML5實(shí)現(xiàn)的可以在頁(yè)面中渲染出帶動(dòng)畫效果的SVG餅狀圖形，適合用于制作進(jìn)度顯示，加載進(jìn)度等。對(duì)本段代碼感興趣的朋
2016-02-16
HTML5新特性之用SVG繪制微信logo
這篇文章主要介紹了HTML5新特性之用SVG繪制的微信logo 的相關(guān)資料,需要的朋友可以參考下
2016-02-03
html5 svg打開(kāi)圣誕禮盒和下雪動(dòng)畫特效源碼
本源碼是一款很炫的html5 svg打開(kāi)圣誕禮盒和下雪動(dòng)畫效果。點(diǎn)擊禮盒后會(huì)飛出許多icon禮物，之后會(huì)有雪花從屏幕上方飄落
2015-12-09
深入淺析HTML5中的SVG
SVG是Scalable Vector Graphics的縮寫，意為可縮放矢量圖形。1998年，萬(wàn)維網(wǎng)聯(lián)盟成立了一個(gè)工作組，研發(fā)一種通過(guò)XML來(lái)表現(xiàn)矢量圖形的技術(shù)——SVG！由于SVG也是一種XML文件
2015-11-27
基于html5實(shí)現(xiàn)的svg圖標(biāo)手機(jī)菜單動(dòng)態(tài)特效源碼
是一段基于HTML5實(shí)現(xiàn)的適合手機(jī)端展開(kāi)收縮的動(dòng)態(tài)導(dǎo)航菜單內(nèi)容展示效果代碼，本段代碼適應(yīng)于所有網(wǎng)頁(yè)使用，有興趣的朋友們可以前來(lái)下載使用
2015-11-25
html5基于svg實(shí)現(xiàn)圓形進(jìn)度統(tǒng)計(jì)動(dòng)畫特效源碼
這是一款html5基于svg實(shí)現(xiàn)圓形進(jìn)度統(tǒng)計(jì)動(dòng)畫特效源碼，運(yùn)行時(shí)可見(jiàn)統(tǒng)計(jì)進(jìn)度呈現(xiàn)圓形展開(kāi)及進(jìn)度條顏色漸變的效果
2015-11-19
基于HTML5 SVG制作漢堡包菜單按鈕分段動(dòng)畫效果
基于HTML5 SVG制作漢堡包菜單按鈕分段動(dòng)畫效果，需要的童鞋直接下載源碼哦。
2015-11-18
深入解析HTML5使用SVG圖像時(shí)的viewBox屬性用法
這篇文章主要介紹了深入解析HTML5使用SVG圖像時(shí)的viewBox屬性用法,包括一些響應(yīng)式設(shè)計(jì)相關(guān)的內(nèi)容,需要的朋友可以參考下
2015-09-02
基于HTML5 SVG響應(yīng)式路徑過(guò)渡動(dòng)畫幻燈片特效源碼
這是一款基于HTML5 SVG制作的路徑過(guò)渡動(dòng)畫幻燈片特效的代碼。該幻燈片特效使用SVG路徑來(lái)剪裁幻燈片中的圖片，制作出幻燈片切換時(shí)不規(guī)則的圖形變換效果
2015-09-01
HTML5 SVG和CSS3實(shí)現(xiàn)的表單浮動(dòng)標(biāo)簽特效源碼
是一段實(shí)現(xiàn)了12中非常炫酷的表單浮動(dòng)標(biāo)簽特效代碼，本段代碼適應(yīng)于所有網(wǎng)頁(yè)使用，有興趣的朋友們可以前來(lái)下載使用
2015-04-10

最新評(píng)論

<u id="cmyvp"><button id="cmyvp"></button></u>