基本內(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)頁(yè)游戲
???　　　　* Canvas
????　　　　　　* 依賴分辨率
????　　　　　　* 不支持事件綁定
????　　　　　　* 最合適網(wǎng)頁(yè)游戲
????　　　　　　* 保存為".jpg"格式的圖片
??　　* SVG用途
???　　　　* 網(wǎng)頁(yè)中一些小的圖標(biāo)
???　　　　* 網(wǎng)頁(yè)中動(dòng)態(tài)特效(動(dòng)畫效果)
?　　SVG 文件示例

1 <?xml version="1.0" encoding="utf-8" ?> 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 3 <svg width="100%" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> 4 <rect x="100" y="100" width="300" height="100" fill="blue" troke="black" 5 stroke-width="4"/> 6 </svg>

二、HTML5中使用SVG
??　　* 使用<svg></svg>元素
???　　　　* 作用 - 類似于<canvas>元素
????　　　　　　* 默認(rèn)大小為 300px*150px
????　　　　　　* 使用CSS樣式
??　　* 使用SVG繪制圖形，必須定義<svg>中
?　　示例：

1 <svg width="100%" height="300"> 2 <rect x="100" y="100" width="300" height="100" fill="blue" troke="black" stroke-width="4"/> 3 </svg>

三、繪制圖形
??　　1. 矩形元素
???　　　　<rect x="" y="" width="" height=""? />
??　　2. 圓型元素
???　　　　<circle cx="" cy="" r="" />
??　　3. 橢圓元素
???　　　　<ellipse cx="" cy="" rx="" ry="">
??　　4. 直線元素
???　　　　<line x1="" y1="" x2="" y2="" />
??　　5. 折線元素
???　　　　<polyline points="">
??　　6. 多邊形元素
???　　　　<polygon points="" />

　　示例：

1 <!-- 2 在HTML頁(yè)面中使用svg標(biāo)簽的話 3 * 定義<svg></svg>元素 4 * 類似于<canvas>元素的作用 5 * 默認(rèn)大小 300px * 150px 6 * 設(shè)置寬度和高度 - 屬性和style 7 * 利用svg繪制所有圖形,必須定義在<svg>元素內(nèi) 8 * 利用svg繪制的圖形是與HTML頁(yè)面有關(guān)的 9 --> 10 <!-- <svg style="background:pink;width:400px;height:400px;"> --> 11 <!-- 12 繪制矩形 - <rect /> 13 * x和y - 繪制矩形的左上角坐標(biāo)值 14 * width和height - 繪制矩形的寬度和高度 15 * 必須使用屬性方式,不能使用style樣式方式 16 * 默認(rèn)顏色為黑色 17 設(shè)置顏色 - 既可以使用屬性,還可以使用樣式 18 * fill - 設(shè)置填充顏色 19 * stroke - 設(shè)置描邊顏色 20 設(shè)置線條寬度 21 * stroke-width 22 注意 23 * svg繪制的圖形,使用style方式設(shè)置樣式,使用的不是CSS屬性,而是SVG屬性 24 --> 25 <rect x="10" y="10" width="100" height="100" fill="blue" stroke="black" stroke-width="5" /> 26 27 <!-- 28 繪制圓形 - <circle> 29 * cx和cy - 圓形的圓形坐標(biāo)值 30 * r - 圓形的半徑 31 --> 32 <circle cx="100" cy="100" r="100" fill="pink" /> 33 34 <!-- SVG繪制橢圓 --> 35 <ellipse cx="150" cy="150" rx="150" ry="100" /> 36 37 <!-- SVG繪制線條 --> 38 <line x1="10" y1="10" x2="200" y2="200" stroke-width="10" stroke="black"/> 39 <line x1="200" y1="200" x2="200" y2="10" stroke-width="10" stroke="black"/> 40 41 <!-- SVG繪制折線 --> 42 <polyline points="10,10 200,10 200,200 10,200 100,100 10,10" stroke-width="5" stroke="black" fill="white"/> 43 44 <!-- SVG繪制多邊形 --> 45 <polygon points="10,10 200,10 200,200 10,200 100,100 10,10" stroke-width="5" stroke="black" fill="white" /> View Code

四、特效元素
??　　1. 漸變 - 漸變?cè)囟x在<defs>元素內(nèi)
???　　　　* 線性漸變 - <linearGradient>
????　　　　　　* 該元素是起始元素
????　　　　　　<linearGradient x1="%" y1="%" x2="%" y2="%">
?????　　　　　　　　<stop offset="%" stop-color="color" />
????　　　　　　</linearGradient>
???　　　　* 扇形(射線)漸變 - <radialGradient>
??　　2. 濾鏡 - 高斯模糊
???　　　　* 濾鏡使用<filter>元素
???　　　　* <feGaussianBlur>元素 - 高斯模糊
????　　　　　　* in="SourceGraphic"
????　　　　　　* stdDeviation - 設(shè)置模糊程度
???　　　　* 注意 - 定義在<defs>元素中

1 <!-- SVG線性漸變 --> 2 <svg width="400px" height="400px"> 3 <!-- 4 設(shè)置線型漸變 - <linearGradient> 5 * 用法 - 將漸變定義在<defs>元素中 6 * 特點(diǎn) - 具有基準(zhǔn)線 7 * 起點(diǎn)坐標(biāo)值 - x1和y1 8 * 終點(diǎn)坐標(biāo)值 - x2和y2 9 * 注意 10 * 該元素是起始元素 11 <linearGradient></linearGradient> 12 * x1和y1、x2和y2的值都是百分值 13 * 定義id屬性 14 * 用于將設(shè)置的漸變添加到繪制的圖形元素中 15 * 使用<stop>元素 - 設(shè)置漸變的顏色 16 * offset - 設(shè)置漸變顏色的位置 17 * 該值也是百分值 18 * stop-color - 設(shè)置漸變顏色 19 * stop-opacity - 設(shè)置漸變顏色的透明度 20 --> 21 <defs> 22 <linearGradient id="mygrd" x1="0" y1="0" x2="100%" y2="100%"> 23 <stop offset="0" stop-color="red" /> 24 <stop offset="50%" stop-color="green" /> 25 <stop offset="100%" stop-color="blue" /> 26 </linearGradient> 27 </defs> 28 <!-- 29 如何可以將上面設(shè)置線型漸變,添加在下面的矩形中? 30 * 使用fill屬性,值為url(#漸變?cè)氐膇d值) 31 --> 32 <rect x="0" y="0" width="400" height="400" fill="url(#mygrd)" /> 33 </svg> 34 <!-- SVG高斯模糊 --> 35 <svg width="500px" height="500px"> 36 <!-- 37 如何設(shè)置高斯模糊濾鏡 38 * 定義<defs></defs>元素 - 濾鏡定義在該元素中 39 * 定義<filter></filter>元素 - 表示SVG的濾鏡 40 * 定義高斯模糊元素<feGaussianBlur> 41 * 屬性 42 * in="SourceGraphic" - 固定寫法 43 * stdDeviation - 設(shè)置模糊程度 44 * 為<filter>元素定義id屬性值 45 * 方便添加在繪制圖形的元素中 46 --> 47 <defs> 48 <filter id="myfilter"> 49 <feGaussianBlur in="SourceGraphic" stdDeviation=5 /> 50 </filter> 51 </defs> 52 <!-- 53 如何將上面的高斯模糊與下面的元素進(jìn)行關(guān)聯(lián) 54 * 使用filter屬性,值為url(#id) 55 * 設(shè)置當(dāng)前圖形的濾鏡 56 --> 57 <rect x="100" y="100" width="100" height="100" filter="url(#myfilter)" fill="green" /> 58 </svg> View Code

老師的題外話：

* 實(shí)際開發(fā)中
???? * 多用SVG
?????? * 不失真
?????? * 可被搜索
?????? * 頁(yè)面優(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頁(yè)面中定義
???? * 是只能定義一個(gè)元素,還是可以定義多個(gè)元素?
?????? * 在一個(gè)HTML頁(yè)面可以定義多個(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庫(kù)

?

轉(zhuǎn)載于:https://www.cnblogs.com/Medeor/p/4960512.html

總結(jié)

以上是生活随笔為你收集整理的SVG 基本绘图方法总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。