svg 基礎(chǔ)
1.svg是一種使用xml技術(shù)描述二維圖形的語言，是一種適量圖
2.與canvas相比的優(yōu)勢(shì)
- 能被搜索引擎搜索到
- 不依賴分辨率
- 能綁定事件
- 大型渲染區(qū)域（如：百度地圖），不適合游戲
3.用途 - 靜態(tài)圖形繪制
- 動(dòng)態(tài)動(dòng)畫效果
- 專門事件綁定
繪制圖形
1.繪制矩形
<svg>
<rect id="rect" width="50" height="50" fill="red" stroke="black" stroke-width="5"></rect>
</svg>
注意：
- 如果要使用style設(shè)置背景顏色，不能使用style=“background：red”,要使用style=“fill：red”
- 不能通過js設(shè)置圖形的屬性，這些屬性都為只讀，如（width，height）
2.繪制圓形
<svg>
<circle cx="100" cy="100" r="50"></circle>
</svg>
3.繪制橢圓
<svg>
<ellipse cx="100" cy="100" rx="50" ry="80"></ellipse>
</svg>
4.繪制直線
<svg>
<line x1="10" y1="10" x2="200" y2="200" stroke="black></line>
</svg>
注意：顏色必須得加
5.繪制折線
<svg>
<polyline points="100,20 20,100 200,200"></polyline>
</svg>
6.繪制多邊形
<svg>
<polygon points="100,20 20,100 200,200 100,20"></polygon>
</svg>
漸變效果
1.線性漸變
<svg>
<defs>
<linearGradient id="rect" x1="0" y1="0" x2="100%" y2="100%">
//漸變?cè)?，坐?biāo)值必須是百分?jǐn)?shù)
<stop offset="0" stop-color="red"></stop>
<stop offset="100%" stop-color="green"></stop>
//通過stop設(shè)置漸變顏色，offset值必須是百分?jǐn)?shù)
</linearGradient>
<defs>
<rect width="400" height="400" fill="url(#rect)"></rect>
//使用fill屬性，值為url(#漸變?cè)氐膇d值)
</svg>
2.扇形漸變
radialGradient 參考線性漸變
模糊效果
<svg>
<defs>
<filter id="rect"><feGaussianBlur in=“SourceGraphic stdDeviation="3”></filter>
<defs>
<rect width="400" height="400" filter="url(#rect)" fill="red"></rect>
//使用fill屬性，值為url(#漸變?cè)氐膇d值)
</svg>
two.js
1、 專門用于繪制二維圖形，支持SVG Canvas WebGL
2、 特點(diǎn)
- 深度實(shí)現(xiàn)具有動(dòng)畫效果的矢量圖
- 致力于更簡(jiǎn)潔地創(chuàng)建矢量圖及動(dòng)畫效果
- 不支持文本或圖片
3、 svg再將來的工作開發(fā)，使用率并不高 - svg圖片一般都是由UI設(shè)計(jì)師來完成
- SVG即使是我們自己來設(shè)計(jì)，目前網(wǎng)絡(luò)上有很多提供svg圖片的網(wǎng)站
- 使用JS庫(kù)來
- 官網(wǎng)
https://two.js.org/
