svg主要是利用animate 的 attributeName="d"來(lái)改變軌跡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#canvas{
box-sizing: content-box;
padding: 5px;
background-color: #fff;
border-radius: 100%;
position: relative;
border: 10px solid rgba(154, 205, 50, .8);
}
</style>
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text class="liquidFillGaugeText" text-anchor="middle" font-size="42px" transform="translate(100,120)" style="fill: #000">50.0%</text>
<!-- Wave -->
<g id="wave">
<path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 200 100 Z">
<animate dur="5s" repeatCount="indefinite" attributeName="d" attributeType="XML" values="M0 100 C100 18, 92 179, 200 100 A95 95 0 0 1 0 100 Z;
M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z;
M0 100 C92 179,120 28, 200 100 A95 95 0 0 1 0 100 Z;
M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z;
M0 100 C100 18, 92 179, 200 100 A95 95 0 0 1 0 100 Z"></animate>
</path>
</g>
<circle cx="100" cy="100" r="80" stroke-width="10" stroke="white" fill="transparent"></circle>
<circle cx="100" cy="100" r="90" stroke-width="20" stroke="yellowgreen" fill="none" class="percentage-pie-svg"></circle>
</svg>
<svg width="320px" height="320px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M10 315
L 110 215
A 30 50 90 0 0 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>
<script>
window.onload = function () {
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext('2d');
let radians = (Math.PI / 180) * 180;
let startTime = Date.now();
let time = 2000;
let clockwise = 1;
let cp1x, cp1y, cp2x, cp2y;
// 左邊波浪起的狀態(tài)
// ctx.bezierCurveTo(90, 28, 92, 179, 200, 100);
// 平穩(wěn)狀態(tài)
// ctx.bezierCurveTo(145, 100, 41, 100, 200, 100);
//右邊波浪起的狀態(tài)
// ctx.bezierCurveTo(90, 172, 92, 21, 200, 100);
requestAnimationFrame(function waveDraw() {
let t = Math.min(1.0, (Date.now() - startTime) / time);
if (clockwise == 1) {//從初始左邊波浪漸變到當(dāng)t=1時(shí)的平穩(wěn)狀態(tài)
cp1x = 90 + (55 * t);//t=0,為要的初始形狀,t=1時(shí),為當(dāng)前的最終形狀
cp1y = 28 + (72 * t);
cp2x = 92 - (51 * t);
cp2y = 179 - (79 * t);
} else if (clockwise == 2) {//從平穩(wěn)狀態(tài)變化到右邊波浪起來(lái)
cp1x = 145 - (55 * t);
cp1y = 100 + (72 * t);
cp2x = 41 + (51 * t);
cp2y = 100 - (79 * t);
} else if (clockwise == 3) {//右邊波浪漸變到當(dāng)t=1時(shí)的平穩(wěn)狀態(tài)
cp1x = 90 + (55 * t);
cp1y = 172 - (72 * t);
cp2x = 92 - (51 * t);
cp2y = 21 + (79 * t);
} else {////從平穩(wěn)狀態(tài)變化到左邊波浪起來(lái)
cp1x = 145 - (55 * t);
cp1y = 100 - (72 * t);
cp2x = 41 + (51 * t);
cp2y = 100 + (79 * t);
}
ctx.clearRect(0, 0, 200, 200);
ctx.beginPath();
ctx.moveTo(0, 100);
// 繪制三次貝塞爾曲線
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 200, 100);
// 繪制圓弧
ctx.arc(100, 100, 100, 0, radians, 0);
ctx.fillStyle = "rgba(154, 205, 50, .8)";
ctx.fill();
ctx.save();
if (t == 1) {
startTime = Date.now();
if (clockwise === 4) {
clockwise = 1;
} else {
clockwise += 1;
}
// clockwise = !clockwise;
}
requestAnimationFrame(waveDraw);
});
}
</script>
</body>
</html>
svg常用的M(移動(dòng)),L(畫(huà)線),H(平行線,橫線),V(垂直線,豎線),Z(從當(dāng)前點(diǎn)畫(huà)一條直線到路徑的起點(diǎn))
<path d="M10 10 H 90 V 90 H 10 L 10 10"/>
<path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
//兩個(gè)是一樣的,只不過(guò)一個(gè)使用Z來(lái)完成閉合
C(三次貝塞爾曲線(波浪線))
三次貝塞爾曲線需要定義一個(gè)點(diǎn)和兩個(gè)控制點(diǎn)，所以用C命令創(chuàng)建三次貝塞爾曲線，需要設(shè)置三組坐標(biāo)參數(shù)：C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)，最后一個(gè)坐標(biāo)(x,y)表示的是曲線的終點(diǎn)，另外兩個(gè)坐標(biāo)是控制點(diǎn)，(x1,y1)是起點(diǎn)的控制點(diǎn)，(x2,y2)是終點(diǎn)的控制點(diǎn)。
CCC.png
<path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
S(簡(jiǎn)寫(xiě)的貝塞爾曲線命令)
一個(gè)點(diǎn)某一側(cè)的控制點(diǎn)是它另一側(cè)的控制點(diǎn)的對(duì)稱(chēng)（以保持斜率不變）?？梢允褂靡粋€(gè)簡(jiǎn)寫(xiě)的貝塞爾曲線命令S：S x2 y2, x y (or s dx2 dy2, dx dy)，S命令可以用來(lái)創(chuàng)建與之前那些曲線一樣的貝塞爾曲線，但是，如果S命令跟在一個(gè)C命令或者另一個(gè)S命令的后面，它的第一個(gè)控制點(diǎn)，就會(huì)被假設(shè)成前一個(gè)控制點(diǎn)的對(duì)稱(chēng)點(diǎn)。如果S命令單獨(dú)使用，前面沒(méi)有C命令或者另一個(gè)S命令，那么它的兩個(gè)控制點(diǎn)就會(huì)被假設(shè)為同一個(gè)點(diǎn)
SSS.png
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
//S的第一個(gè)控制點(diǎn)是65 10 對(duì)于95 80的對(duì)稱(chēng)點(diǎn),也就是125,150,第二個(gè)控制點(diǎn)是150 150
Q(二次貝塞爾曲線)
二次貝塞爾曲線Q比三次貝塞爾曲線簡(jiǎn)單，只需要一個(gè)控制點(diǎn)，用來(lái)確定起點(diǎn)和終點(diǎn)的曲線斜率。需要兩組參數(shù)，控制點(diǎn)和終點(diǎn)坐標(biāo)。x1y1為控制點(diǎn)坐標(biāo),xy為終點(diǎn)坐標(biāo)Q命令：Q x1 y1, x y (or q dx1 dy1, dx dy)
QQQ.png
<path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
T(簡(jiǎn)寫(xiě)的二次貝塞爾曲線命令)
快捷命令T會(huì)通過(guò)前一個(gè)控制點(diǎn)，推斷出一個(gè)新的控制點(diǎn)。這意味著，在你的第一個(gè)控制點(diǎn)后面，可以只定義終點(diǎn)，就創(chuàng)建出一個(gè)相當(dāng)復(fù)雜的曲線。需要注意的是，T命令前面必須是一個(gè)Q命令，或者是另一個(gè)T命令，才能達(dá)到這種效果。如果T單獨(dú)使用，那么控制點(diǎn)就會(huì)被認(rèn)為和終點(diǎn)是同一個(gè)點(diǎn)，所以畫(huà)出來(lái)的將是一條直線。
<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
//跟著Q后面的T的控制點(diǎn)是52.5 10 對(duì)于95 80的對(duì)稱(chēng)點(diǎn)137.5 150
A(弧線)
命令:A rx(x軸半徑) ry(y軸半徑) x-axis-rotation(弧形的旋轉(zhuǎn)情況:0~180) large-arc-flag(角度大小,決定弧線是大于還是小于180度，0表示小角度弧，1表示大角度弧) sweep-flag(弧線的方向，0表示從起點(diǎn)到終點(diǎn)沿逆時(shí)針畫(huà)弧，1表示從起點(diǎn)到終點(diǎn)沿順時(shí)針畫(huà)弧) x y(終點(diǎn)坐標(biāo))
<path d="M10 315
L 110 215
A 30 50 90 0 0 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
