fix svg progress circle browser compatibility

zumerlab · Mar 18, 2023 · 430ddc1 · 430ddc1
1 parent 22ad67d
commit 430ddc1
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 18 deletions.
diff --git a/css/index.css b/css/index.css
@@ -3440,24 +3440,24 @@ svg {
 }
 
 .base {
-  cx: calc(var(--diam) / 2);
-  cy: calc(var(--diam) / 2);
-  r: calc(var(--diam) / 2 - var(--stroke));
+  cx: calc(var(--diam) / 2 * 1px);
+  cy: calc(var(--diam) / 2 * 1px);
+  r: calc((var(--diam) / 2 - var(--stroke)) * 1px);
   fill: none;
   stroke: #e6e6e6;
   stroke-width: var(--stroke);
 }
 
 .percent {
-  cx: calc(var(--diam) / 2);
-  cy: calc(var(--diam) / 2);
-  r: calc(var(--diam) / 2 - var(--stroke));
+  cx: calc(var(--diam) / 2 * 1px);
+  cy: calc(var(--diam) / 2 * 1px);
+  r: calc((var(--diam) / 2 - var(--stroke)) * 1px);
   fill: none;
   stroke: #186ddd;
   stroke-width: var(--stroke);
   stroke-dasharray: 100;
   stroke-linecap: round;
-  stroke-dashoffset: calc(100 - var(--val));
+  stroke-dashoffset: calc((100 - var(--val)) * 1px);
 }
 
 .p50 {

diff --git a/css/index.css.map b/css/index.css.map
diff --git a/dist/css/index.min.css b/dist/css/index.min.css
diff --git a/dist/css/index.min.css.map b/dist/css/index.min.css.map
diff --git a/index.html b/index.html
@@ -56,7 +56,7 @@
         <div class="item s box">A</div>
         <div class="item s rounded">N</div>
         <div class="item l"> 
-          <svg >
+          <svg>
               <circle class="base" />
               <circle class="percent p50" pathLength="100" />
           </svg>

diff --git a/src/index.scss b/src/index.scss
@@ -379,23 +379,23 @@ svg {
 }
 
 .base {
-  cx: calc(var(--diam) / 2);
-  cy: calc(var(--diam) / 2);
-  r: calc(var(--diam) / 2 - var(--stroke));
+  cx: calc(var(--diam) / 2 * 1px);
+  cy: calc(var(--diam) / 2 * 1px);
+  r: calc((var(--diam) / 2 - var(--stroke)) * 1px);
   fill: none;
   stroke: #e6e6e6;
   stroke-width: var(--stroke); 
 }
 .percent {
-  cx: calc(var(--diam) / 2);
-  cy: calc(var(--diam) / 2);
-  r: calc(var(--diam) / 2 - var(--stroke));
+  cx: calc(var(--diam) / 2 * 1px);
+  cy: calc(var(--diam) / 2 * 1px);
+  r: calc((var(--diam) / 2 - var(--stroke)) * 1px);
   fill: none;
   stroke: #186ddd;
   stroke-width: var(--stroke); 
   stroke-dasharray: 100;
   stroke-linecap: round;
-  stroke-dashoffset: calc(100 - var(--val));
+  stroke-dashoffset: calc((100 - var(--val)) * 1px);
 }
 
 .p50 {