參考資料:
張?chǎng)涡?-一個(gè)簡(jiǎn)單的loading demo
一、svg簡(jiǎn)介
SVG 是使用 XML 來描述二維圖形和繪圖程序的語言。
- SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
- SVG 用來定義用于網(wǎng)絡(luò)的基于矢量的圖形
- SVG 使用 XML 格式定義圖形
- SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有所損失
- SVG 符合W3C標(biāo)準(zhǔn)
- SVG 與諸如 DOM 和 XSL 之類的 W3C 標(biāo)準(zhǔn)是一個(gè)整體
支持IE9+
二、svg嵌入方式
- 直接使用svg標(biāo)簽插入html文檔（最常用）
<svg width="100%" height="100%" version="1.1"></svg>
- 使用xml標(biāo)準(zhǔn)編寫外部文件，后綴名為
.svg，使用ifram標(biāo)簽鏈入html文檔，如
// rect.svg文件
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
// html文件
<iframe src="rect.svg" width="300" height="100"></iframe>
三、loading實(shí)戰(zhàn)
了解了svg基礎(chǔ)后，讓我們擼起袖子開始干吧。實(shí)踐是最好的提高方式啊。
我們想要實(shí)現(xiàn)的初步效果是，通過滑塊的左右移動(dòng)，控制圓環(huán)的有色面積，效果如下：
形狀標(biāo)簽
svg中有許多形狀標(biāo)簽，包括矩形<rect>、圓<circle>、橢圓<ellipse>、線<line>等等。這里自然是使用<circle>,并為其設(shè)置中心點(diǎn)和半徑。
<svg width="100%" height="100%" version="1.1">
<circle cx = "50" cy = "50" r = "40"></circle> //一個(gè)半徑為40的圓，中心點(diǎn)位于（50,50）
</svg>
svg的坐標(biāo)是相對(duì)于左上角
對(duì)于其他形狀，也都有其各自的設(shè)置屬性
<rect width= "50" height= ></rect>
<line x1="0" y1="0" x2= "50" y2= ></line>
<polygon points="220,100 300,210 170,250 123,234"></polygon> //多邊形
屬性/樣式
我們要的是一個(gè)空心圓，那么就需要對(duì)我們的大黑餅進(jìn)行美化。修改黑餅的填充和外邊框顏色
<svg width="100%" height="100%" version="1.1">
<circle cx = "50" cy = "50" r = "40" fill="none" stroke="#ddd" stroke-width="5px"></circle>
</svg>
也可以通過為他設(shè)置樣式的方式
<circle cx = "50" cy = "50" r = "40" style = "fill='none'; stroke='#ddd' ;stroke-width='5px';"></circle>
注意：作為屬性值時(shí)不允許添加單位
stroke-dasharray樣式
stroke-dasharray（num1,num2...）：設(shè)置循環(huán)間距，虛實(shí)結(jié)合
我們?cè)谶@個(gè)圓上再疊加一層有色圓，并設(shè)置stroke-dasharray樣式
<circle id="circle1" “cx = "50" cy = "50" r = "40" style = "fill='none'; stroke='#ddd' ;stroke-width='5px';"></circle>
<circle id="circle2" “cx = "50" cy = "50" r = "40" style = "fill='none'; stroke='#00A5E0' ;stroke-width='5px'; stroke-dasharray="120,250"></circle>
//這里的stroke-dasharray是隨機(jī)，之后需要通過js修改
一個(gè)有趣的樣式，可以自行更多的嘗試。
所以開篇的效果重點(diǎn)就在于使用JS去控制stroke-dasharray屬性
<input type="range" id="range" value = "0"/>
//js代碼
if (window.addEventListener) {
var range1 = document.querySelector("#range");
var circle = document.querySelectorAll("circle")[1];
if (range1 && circle) {
range1.addEventListener("change", function() {
var persent = range1.value / 100;
circle.setAttribute("stroke-dasharray", Math.PI * 2 * 40 * persent+","+Math.PI * 2 * 40 * (1-persent));
});
}
一個(gè)滑塊控制圓環(huán)的demo就完成啦！
漸變
現(xiàn)在來給demo升個(gè)級(jí)，新增兩條需求
- 給圓環(huán)加上漸變色
- 圓環(huán)計(jì)時(shí)自動(dòng)改變
- 線性漸變linearGradient：x1,x2相等,y1和y2不相等，表示水平漸變；x1,x2不相等,y1和y2相等，表示垂直漸變；
- 通過url包裹Id調(diào)用相應(yīng)漸變塊
和css3的漸變相比，svg能實(shí)現(xiàn)的效果更復(fù)雜
<defs>
<linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient1">
<stop offset="0" stop-color="#e52c5c"></stop>
<stop offset="1" stop-color="#ab5aea"></stop>
</linearGradient>
<linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient2">
<stop offset="0" stop-color="#4352f3"></stop>
<stop offset="1" stop-color="#ab5aea"></stop>
</linearGradient>
</defs>
<g transform="translate(250,150),rotate(-90)">
//對(duì)整個(gè)模塊實(shí)現(xiàn)旋轉(zhuǎn)
<circle cx="100" cy="50" r="40" stroke="#ddd" stroke-width="10" fill="none"/>
<circle cx="100" cy="50" r="40" stroke="url('#gradient2')" stroke-width="10" fill="none" stroke-dasharray="125 251"/>
</g>
定時(shí)就比較好做了，加一個(gè)定時(shí)器即可。出于性能考慮這里我使用setTimeout鏈?zhǔn)浇Y(jié)構(gòu)設(shè)置定時(shí)器（當(dāng)然也能使用setInterval）
var time=10;
var count = Math.PI * 2 * 40/10;
setTimeout(function fn(){
//var present = count * time/Math.PI * 2 * 40
if(time > 0){
setTimeout(fn,1000);
}
circle2.setAttribute("stroke-dasharray", count*time+","+Math.PI * 2 * 40 );
time--;
},1000)
四、小結(jié)
svg繪制矢量圖形，而且效果豐富，兼容性好支持IE9+，本篇僅僅是帶你入門。還有很多精彩的功能等待你去學(xué)習(xí)。來不及了，快學(xué)車！
