From 7f21f9f9e103145e836e2373c1016eb928c1ba66 Mon Sep 17 00:00:00 2001
From: Phoenix Zhong <phoenixson191@gmail.com>
Date: Mon, 20 Nov 2023 22:35:58 +0800
Subject: [PATCH] docs: add svg solution

---
 ...52\350\277\233\345\272\246\347\216\257.md" | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git "a/_posts/2023-11-15-\344\273\216\351\233\266\345\274\200\345\247\213build\344\270\200\344\270\252\350\277\233\345\272\246\347\216\257.md" "b/_posts/2023-11-15-\344\273\216\351\233\266\345\274\200\345\247\213build\344\270\200\344\270\252\350\277\233\345\272\246\347\216\257.md"
index b3e9aa9..e9c3ff6 100644
--- "a/_posts/2023-11-15-\344\273\216\351\233\266\345\274\200\345\247\213build\344\270\200\344\270\252\350\277\233\345\272\246\347\216\257.md"
+++ "b/_posts/2023-11-15-\344\273\216\351\233\266\345\274\200\345\247\213build\344\270\200\344\270\252\350\277\233\345\272\246\347\216\257.md"
@@ -107,3 +107,40 @@ const uploadFiles = async (files) => {
   const file_keys = await Promise.all(promises);
 };
 ```
+
+## SVG
+
+另外一种实现方式是用 SVG。关键点是`stroke-dasharray`，第一个参数是虚线宽度，第二个参数是虚线间隔。将虚线间隔设置为大于圆圈周长，虚线宽度设置为进度长度，就可以表示进度了。
+
+```html
+<svg
+  width="440"
+  height="440"
+  style="
+    transform: rotate(-90deg);
+"
+>
+  <circle
+    cx="220"
+    cy="220"
+    r="170"
+    stroke-width="8"
+    stroke="#D1D3D7"
+    fill="none"
+  ></circle>
+  <circle
+    cx="220"
+    cy="220"
+    r="170"
+    stroke-width="8"
+    stroke="#00A5E0"
+    fill="none"
+    stroke-dasharray="534 1069"
+  ></circle>
+</svg>
+```
+
+<svg width="440" height="440" style="transform: rotate(-90deg);">
+<circle cx="220" cy="220" r="170" stroke-width="8" stroke="#D1D3D7" fill="none"></circle>
+<circle cx="220" cy="220" r="170" stroke-width="8" stroke="#00A5E0" fill="none" stroke-dasharray="534 1069"></circle>
+</svg>