docs: add svg solution

zhongxiao37 · Nov 20, 2023 · 7f21f9f · 7f21f9f
1 parent b6af93b
commit 7f21f9f
Showing 1 changed file with 37 additions and 0 deletions.
diff --git a/_posts/2023-11-15-从零开始build一个进度环.md b/_posts/2023-11-15-从零开始build一个进度环.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>