深入淺析HTML5中的SVG

由 金聰采編 分享時(shí)間：2017-09-05 加入收藏我要投稿點(diǎn)贊

SVG背景SVG是ScalableVecoGaphic的縮寫，意為可縮放矢量圖形。1998年，萬維網(wǎng)聯(lián)盟成立了一個(gè)工作組，研發(fā)一種通過XML來表現(xiàn)矢量圖形的技術(shù)&mdah;&mdah;SVG！由于SVG也是一種XML文件，所以SVG也繼承了XML的開放性、可......
以下是【金聰采編】分享的內(nèi)容全文：

SVG 背景

SVG是Scalable Vector Graphics的縮寫，意為可縮放矢量圖形。1998年，萬維網(wǎng)聯(lián)盟成立了一個(gè)工作組，研發(fā)一種通過XML來表現(xiàn)矢量圖形的技術(shù)——SVG！由于SVG也是一種XML文件，所以SVG也繼承了XML的開放性、可移植性和交互性的優(yōu)點(diǎn)。如今幾乎所有主流的瀏覽器都支持SVG，大家可以從這里得到更多的兼容信息，其中包括：

使用<embed>或者<object>元素來顯示基本的SVG圖形；
使用<img>來顯示SVG圖形；
將SVG圖形應(yīng)用為CSS背景圖；
直接在HTML文檔中使用<svg>標(biāo)簽（需要HTML5支持）；
對(duì)使用CSS或者外部對(duì)象元素的HTML元素使用SVG變換、濾鏡等特效；
對(duì)SVG對(duì)象使用類似photoshop的效果，包括模糊和色彩處理；
對(duì)SVG圖像使用動(dòng)畫；
使用SVG格式的字體；

* SVG
* 基本內(nèi)容
* SVG并不屬于HTML5專有內(nèi)容
* HTML5提供有關(guān)SVG原生的內(nèi)容
* 在HTML5出現(xiàn)之前,就有SVG內(nèi)容
* SVG,簡(jiǎn)單來說就是矢量圖
* SVG文件的擴(kuò)展名為".svg"
* SVG使用的是XML語法
* 概念
* SVG是一種使用XML技術(shù)描述二維圖形的語言
* SVG的特點(diǎn)
* SVG繪制圖形可以被搜索引擎抓取
* SVG在圖片質(zhì)量不下降的情況下,被放大
* SVG與Canvas的區(qū)別
* SVG
* 不依賴分辨率
* 支持事件綁定
* 大型渲染區(qū)域的程序(例如百度地圖)
* 不能用來實(shí)現(xiàn)網(wǎng)頁游戲
* Canvas
* 依賴分辨率
* 不支持事件綁定
* 最合適網(wǎng)頁游戲
* 保存為".jpg"格式的圖片
* 用途
* 網(wǎng)頁中一些小的圖標(biāo)
* 網(wǎng)頁中動(dòng)態(tài)特效(動(dòng)畫效果)
* HTML5中使用SVG
* 使用<svg></svg>元素
* 作用 - 類似于<canvas>元素
* 默認(rèn)大小為300px*150px
* 使用CSS樣式
* 使用SVG繪制圖形,必須定義<svg>元素中
* 繪制圖形
* 矩形元素

復(fù)制代碼

代碼如下:

<rect x="" y="" width="" height="" />
<!DOCTYPE html>
<html>
<head>
<title>SVG繪制矩形</title>
<meta charset="utf-8" />
</head>
<body>

<svg style="background:pink;width:400px;height:400px;">

<rect x="10" y="10" width="100" height="100" fill="blue" stroke="black" stroke-width="5" />
<rect x="120" y="10" width="100" height="100" style="fill:blue;stroke:black;stroke-width:5" />
</svg>
</body>
</html>
* 圓形元素
<circle cx="" cy="" r="" />
<body>
<svg width="500px" height="500px">

<circle cx="100" cy="100" r="100" fill="pink" />
</svg>
</body>
* 橢圓元素
<ellipse cx="" cy="" rx="" ry="">
<body>
<svg width="300px" height="300px">
<ellipse cx="150" cy="150" rx="150" ry="100" />
</svg>
</body>
* 直線元素
<line x1="" y1="" x2="" y2="" />
<body>

<svg width="300px" height="300px">
<line x1="10" y1="10" x2="200" y2="200" stroke-width="10" stroke="black"/>
<line x1="200" y1="200" x2="200" y2="10" stroke-width="10" stroke="black"/>
</svg>
</body>
* 折線元素
<polyline points="">
<body>
<svg width="500px" height="500px">

<polyline points="10,10 200,10 200,200 10,200 10,10" stroke-width="5" stroke="black" fill="white"/>
</svg>
</body>
* 多邊形元素
<polygon points="" />
<body>
<svg width="500px" height="500px">
<polyline points="10,10 200,10 200,200 10,200 100,100 10,10" stroke-width="5" stroke="black" fill="white"/>
</svg>
</body>
* 特效元素
* 漸變 - 漸變?cè)囟x在<defs>元素內(nèi)
* 線型漸變 - <linearGradient>
* 該元素是起始元素
<linearGradient x1="%" y1="%" x2="%" y2="%">
<stop offset="%" stop-color="color" />
</linearGradient>
<body>
<svg width="400px" height="400px">

<defs>
<linearGradient id="mygrd" x1="0" y1="0" x2="100%" y2="100%">
<stop offset="0" stop-color="red" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="blue" />
</linearGradient>
</defs>

<rect x="0" y="0" width="400" height="400" fill="url(#mygrd)" />
</svg>
</body>

* 扇形(射線)漸變 - <radialGradient>
* 濾鏡 - 高斯模糊
* 濾鏡使用<filter>元素
* <feGaussianBlur>元素 - 高斯模糊
* in="SourceGraphic"
* stdDeviation - 設(shè)置模糊程度

復(fù)制代碼

代碼如下:

<body>
<svg width="500px" height="500px">

<defs>
<filter id="myfilter">
<feGaussianBlur in="SourceGraphic" stdDeviation=5 />
</filter>
</defs>

<rect x="100" y="100" width="100" height="100" filter="url(#myfilter)" fill="green" />
</svg>
</body>

* 注意 - 定義在<defs>元素中
* TWO.js
* 基本內(nèi)容
* JS庫介紹
* three.js - 專門用于繪制三維圖形
* two.js - 專門用于繪制二維圖形
* two.js支持的格式
* SVG - 默認(rèn)
* Canvas
* WebGL - 專門用于繪制圖像
* 如何使用two.js
* 在HTML頁面中引入two.js文件
* 在HTML頁面中定義容器(<div>)
* 在javascript代碼中
* 獲取HTML頁面中的容器
* 創(chuàng)建Two對(duì)象,將該對(duì)象添加到容器中
new Two(params).appendTo(Element);
* 使用two.js提供的API方法進(jìn)行繪制
* 利用two.js提供的方法,設(shè)置圖形
* 利用update()方法進(jìn)行繪制
* 創(chuàng)建Two對(duì)象
* 構(gòu)造器 - new Two(params)
* params參數(shù) - 設(shè)置當(dāng)前對(duì)象的信息
* type - 設(shè)置當(dāng)前使用的格式(Two.Types.svg)
* svg - 默認(rèn)值
* canvas
* webgl
* width和height - 設(shè)置寬度和高度
* fullscreen - 設(shè)置是否全屏
* Boolean值,true表示全屏
* 圖形方法
* makeLine() - 繪制線條
* makeRectangle() - 繪制矩形
* makeCircle() - 繪制圓形
* makeEllipse() - 繪制橢圓
* 動(dòng)畫方法
* update() - 更新動(dòng)畫
* play() - 添加動(dòng)畫(循環(huán))
* pause() - 刪除動(dòng)畫
* 設(shè)置繪制圖形的樣式
* 調(diào)用Two對(duì)象的繪制方法繪制圖形時(shí),返回該圖形對(duì)象
* 通過該圖形對(duì)象,設(shè)置相關(guān)屬性值
* 分組操作
* Two.Group
* 動(dòng)畫效果
* bind(event,callback)方法 - 事件綁定
* event - 綁定事件名稱
* update - 對(duì)應(yīng)update()方法的作用
* 所有的DOM事件都可以綁定
* callback - 事件處理函數(shù)
* 擴(kuò)展內(nèi)容
* 前端開發(fā)工具
* Aptana Studio 3 - 代碼提示
* Webstrom - 國(guó)內(nèi)前端開發(fā)人員神器
* 實(shí)際開發(fā)中
* 多用SVG
* 不失真
* 可被搜索
* 頁面優(yōu)化 - 減少外部鏈接
* <a href="">
* <img src="">
* Canvas - HTML繪制圖形
* 實(shí)際運(yùn)行中,是以圖片方式出現(xiàn)(.png)
* 不能被搜索引擎抓取
* 放大后失真
* SVG內(nèi)容
* 內(nèi)容量非常大
* 靜態(tài)繪制圖形
* 動(dòng)態(tài)動(dòng)畫效果
* 專門提供事件
* 網(wǎng)上關(guān)于SVG的資料很少(沒有書籍)
* SVG的規(guī)范(W3C英文)
* SVG或CANVAS在HTML頁面中定義
* 是只能定義一個(gè)元素,還是可以定義多個(gè)元素?
* 在一個(gè)HTML頁面可以定義多個(gè)<svg>或<canvas>元素
* SVG還是CANVAS都是允許同時(shí)定義(繪制)多個(gè)圖形
* 在實(shí)際開發(fā)中的使用
* SVG在將來的工作開發(fā),使用率并不高
* SVG圖片一般都是由UI設(shè)計(jì)師來完成
* SVG即使是我們自己來設(shè)計(jì)(繪制)
* 目前網(wǎng)絡(luò)上很多專門提供現(xiàn)成的SVG圖片的網(wǎng)站
* 使用JS庫

------------------------------------------------------------------------------------>為了生活而改變，為了改變而創(chuàng)造.

分享鏈接分享海報(bào)

金聰線報(bào)提示：[ 深入淺析HTML5中的SVG ] 僅為會(huì)員分享，分享目的如下：
1.軟件源碼推廣展示：目的展示軟件相關(guān)功能，接收技術(shù)學(xué)習(xí)者測(cè)試、測(cè)評(píng)；
2.教程課程信息展示：展示課程信息，傳授課程各階段內(nèi)容；
3.設(shè)計(jì)素材圖片展示：展示素材設(shè)計(jì)理念、思維方式、傳播設(shè)計(jì)理念；
4.福利優(yōu)惠信息展示：分享各類最新的福利信息，各種優(yōu)惠信息展示；
以上分享目的僅供學(xué)習(xí)、參考使用，請(qǐng)勿用于其他用途，如果想商業(yè)使用或者代理，請(qǐng)自行聯(lián)系版權(quán)方獲取授權(quán)。任何未獲取授權(quán)的商業(yè)使用與本站無關(guān)，請(qǐng)自行承擔(dān)相應(yīng)責(zé)任。
本站不存儲(chǔ)任何資源文件，敬請(qǐng)周知！

此資源僅供個(gè)人學(xué)習(xí)、研究使用，禁止非法轉(zhuǎn)播或商業(yè)用途，請(qǐng)?jiān)讷@取后24小時(shí)內(nèi)刪除，如果你覺得滿意，請(qǐng)尋求購買正版或獲取授權(quán)！
如果您認(rèn)為本頁信息內(nèi)容侵犯了您的相關(guān)權(quán)益（包含但不限于：著作權(quán)、首發(fā)權(quán)、隱私權(quán)等權(quán)利），或者您認(rèn)為自己是此信息的權(quán)利人但是此信息不是自己發(fā)布的，可以直接版權(quán)舉報(bào)投訴，我們會(huì)根據(jù)網(wǎng)站注冊(cè)協(xié)議、資源分享協(xié)議等協(xié)議處理，以保護(hù)您的合法權(quán)益。

免責(zé)申明：本站僅提供學(xué)習(xí)的平臺(tái)，所有資料均來自于網(wǎng)絡(luò)分享線索，版權(quán)歸原創(chuàng)者所有！本站不提供任何保證，并不承擔(dān)任何法律責(zé)任，如果對(duì)您的版權(quán)或者利益造成損害，請(qǐng)?zhí)峁┫鄳?yīng)的資質(zhì)證明，我們將于3個(gè)工作日內(nèi)予以處理。版權(quán)申訴相關(guān)說明
本網(wǎng)站采用 BY-NC-SA 協(xié)議進(jìn)行授權(quán) 轉(zhuǎn)載請(qǐng)注明原文鏈接:深入淺析HTML5中的SVG

上一篇：淺析移動(dòng)設(shè)備HTML5頁面布局

下一篇：基于HTML5代碼實(shí)現(xiàn)折疊菜單附源碼下載