本文只要描述利用svg circle標(biāo)簽的實(shí)現(xiàn)方法
-
知識點(diǎn)準(zhǔn)備（摘自阮一峰老師的網(wǎng)絡(luò)日志）
1.
<svg>標(biāo)簽SVG 代碼都放在頂層標(biāo)簽``之中。下面是一個例子。
<svg width="100%" height="100%"> <circle id="mycircle" cx="50" cy="50" r="50" /> </svg><svg>的width屬性和height屬性，指定了SVG圖像在` HTML 元素中所占據(jù)的寬度和高度。除了相對單位，也可以采用絕對單位（單位：像素）。如果不指定這兩個屬性，SVG 圖像默認(rèn)大小是300像素（寬） x 150像素（高）。如果只想展示 SVG 圖像的一部分，就要指定
viewBox屬性。<svg width="100" height="100" viewBox="50 50 50 50"> <circle id="mycircle" cx="50" cy="50" r="50" /> </svg>屬性的值有四個數(shù)字，分別是左上角的橫坐標(biāo)和縱坐標(biāo)、視口的寬度和高度。上面代碼中，SVG 圖像是100像素寬 x 100像素高，`viewBox屬性指定視口從(50, 50)這個點(diǎn)開始。所以，實(shí)際看到的是右下角的四分之一圓。注意，視口必須適配所在的空間。上面代碼中，視口的大小是 50 x 50，由于
SVG圖像的大小是 100 x 100，所以視口會放大去適配SVG圖像的大小，即放大了四倍。如果不指定
width屬性和height屬性，只指定viewBox屬性，則相當(dāng)于只給定SVG圖像的長寬比。這時，SVG圖像的默認(rèn)大小將等于所在的 HTML 元素的大小。
2.circle標(biāo)簽
``標(biāo)簽代表圓形。
<svg width="300" height="180"> <circle cx="30" cy="50" r="25" /> <circle cx="90" cy="50" r="25" class="red" /> <circle cx="150" cy="50" r="25" class="fancy" /> </svg>
上面的代碼定義了三個圓。標(biāo)簽的`cx`、`cy`、`r`屬性分別為橫坐標(biāo)、縱坐標(biāo)和半徑，單位為像素。坐標(biāo)都是相對于畫布的左上角原點(diǎn)。
class屬性用來指定對應(yīng)的 CSS類。
.red { fill: red; } .fancy { fill: none; stroke: black; stroke-width: 3pt; }
SVG 的 CSS 屬性與網(wǎng)頁元素有所不同。
- fill：填充色
- stroke：描邊色
- stroke-width：邊框?qū)挾?/li>
3.animate標(biāo)簽
``標(biāo)簽用于產(chǎn)生動畫效果。
<svg width="500px" height="500px"> <rect x="0" y="0" width="100" height="100" fill="#feac5e"> <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" /> </rect> </svg>
上面代碼中，矩形會不斷移動，產(chǎn)生動畫效果。
animate的屬性含義如下。
attributeName：發(fā)生動畫效果的屬性名。from：單次動畫的初始值。to：單次動畫的結(jié)束值。dur：單次動畫的持續(xù)時間。repeatCount：動畫的循環(huán)模式。fill:可以讓動畫結(jié)束后停留 可選值 freeze：停在最后一幀 remove：回到初始幀
可以在多個屬性上面定義動畫。
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" /> <animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />
-
兩種方式主要利用了
svg的stroke-dasharray屬性控制描邊幅度stroke-dasharray屬性通俗來講就是把描邊變成點(diǎn)狀形態(tài)，類似border的dashed的效果stroke-dasharray可接受多個參數(shù)例如：
1.stroke-dasharray: 10 表示 先描邊10個單位 在空10個單位 在描邊10個單位 在空10個單位...... 直到描完整個邊 2.stroke-dasharray: 10 20 表示 先描邊10個單位 在空20個單位 在描邊10個單位 在空20個單位...... 直到描完整個邊 3.stroke-dasharray: 10 20 30 表示 先描邊10個單位 在空20個單位 在描邊30個單位 在空10個單位...... 直到描完整個邊
以下是具體實(shí)現(xiàn)方式
1.利用svg的animate標(biāo)簽實(shí)現(xiàn)
<svg height="400" width="400" viewBox="0 0 400 400">
<circle
cx="200"
cy="200"
r="170"
fill="yellow"
stroke="red"
stroke-width="30"
stroke-dasharray="0 1200"
stroke-linecap="round"
>
<animate fill="freeze" attributeName="stroke-dasharray" from="0 1200" to="500 1200" dur="2s" repeatCount="1" />
</circle>
</svg>
//此處stroke-dasharray的第二個參數(shù)只要能夠大于整個圓環(huán)路徑周長就可以，通過控制animate中 to 的屬性，控制描邊幅度,具體像圓環(huán)這種效果可以畫兩個circle，一個有描邊，一個按上述控制就是圓環(huán)進(jìn)度條的樣子。
2.利用js動態(tài)控制 stroke-dasharray屬性，然后再css中加上過渡動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
circle {
//圓環(huán)的過渡動畫
-webkit-transition: stroke-dasharray 800ms;
transition: stroke-dasharray 800ms;
}
</style>
</head>
<body>
<svg width="440" height="440" viewbox="0 0 440 440">
<circle cx="220" cy="220" r="170" stroke-width="50" stroke="blue" fill="none"></circle>
<circle cx="220" cy="220" r="170" stroke-width="50" stroke="red" fill="none" transform="matrix(0,-1,1,0,0,440)" stroke-dasharray="0 1069"></circle>
</svg>
<script>
let percent = 0.7 //從接口獲取到的圓環(huán)填充百分比
let circle = document.querySelectorAll("circle")[1];
let perimeter = circle.getTotalLength() //圓環(huán)的周長
circle.setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1- percent));
</script>
</body>
</html>
