參考資料:
一穆碎、svg簡介
SVG 是使用 XML 來描述二維圖形和繪圖程序的語言延刘。
- SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
- SVG 用來定義用于網(wǎng)絡(luò)的基于矢量的圖形
- SVG 使用 XML 格式定義圖形
- SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有所損失
- SVG 符合W3C標準
- SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體
支持IE9+
二吵护、svg嵌入方式
- 直接使用svg標簽插入html文檔（最常用）
<svg width="100%" height="100%" version="1.1"></svg>
- 使用xml標準編寫外部文件，后綴名為
.svg埠巨，使用ifram標簽鏈入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實戰(zhàn)
了解了svg基礎(chǔ)后痴晦，讓我們擼起袖子開始干吧望侈。實踐是最好的提高方式啊。
我們想要實現(xiàn)的初步效果是回论，通過滑塊的左右移動，控制圓環(huán)的有色面積分歇，效果如下：
效果圖
形狀標簽
svg中有許多形狀標簽傀蓉，包括矩形<rect>、圓<circle>职抡、橢圓<ellipse>葬燎、線<line>等等。這里自然是使用<circle>,并為其設(shè)置中心點和半徑缚甩。
<svg width="100%" height="100%" version="1.1">
<circle cx = "50" cy = "50" r = "40"></circle> //一個半徑為40的圓谱净，中心點位于（50,50）
</svg>
一個大黑餅
svg的坐標是相對于左上角
對于其他形狀，也都有其各自的設(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> //多邊形
屬性/樣式
我們要的是一個空心圓擅威，那么就需要對我們的大黑餅進行美化壕探。修改黑餅的填充和外邊框顏色
<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>
注意：作為屬性值時不允許添加單位
是不是越來越接近了
stroke-dasharray樣式
stroke-dasharray（num1,num2...）：設(shè)置循環(huán)間距，虛實結(jié)合
我們在這個圓上再疊加一層有色圓郊丛，并設(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是隨機李请，之后需要通過js修改
stroke-dasharray="120,250"效果
stroke-dasharray="1,2"效果
一個有趣的樣式，可以自行更多的嘗試厉熟。
所以開篇的效果重點就在于使用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));
});
}
一個滑塊控制圓環(huán)的demo就完成啦导盅！
漸變
現(xiàn)在來給demo升個級，新增兩條需求
- 給圓環(huán)加上漸變色
- 圓環(huán)計時自動改變
- 線性漸變linearGradient：x1,x2相等,y1和y2不相等揍瑟，表示水平漸變认轨；x1,x2不相等,y1和y2相等，表示垂直漸變月培；
- 通過url包裹Id調(diào)用相應(yīng)漸變塊
和css3的漸變相比嘁字，svg能實現(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)">
//對整個模塊實現(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>
漸變色疊加成功
定時就比較好做了恩急，加一個定時器即可。出于性能考慮這里我使用setTimeout鏈式結(jié)構(gòu)設(shè)置定時器（當然也能使用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é)習。來不及了猬错，快學(xué)車窗看！
