progress arc placed in front of segments

vnau · Dec 23, 2024 · f788bba · f788bba
1 parent 137ceda
commit f788bba
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 16 deletions.
diff --git a/src/lib/Gauge.scss b/src/lib/Gauge.scss
@@ -37,7 +37,7 @@
   stroke-width: calc(var(--gauge-stroke) - 2px);
 }
 
-.gauge-indicator {
+.gauge-pointer {
   fill: white;
   stroke: var(--stroke-color, lightgray);
   stroke-width: 1px;

diff --git a/src/lib/Gauge.svelte b/src/lib/Gauge.svelte
@@ -147,25 +147,12 @@
         {/if}
       {/if}
 
-      <!-- Background Circle -->
+      <!-- Background arc -->
       <path
         class="gauge-background"
         d={calcCurvePath(radius, borderAdjusted, startAngle, stopAngle)}
       />
 
-      <!-- Value Background -->
-      {#if value != undefined || $animatedValue != 0}
-        <path
-          class="gauge-progress"
-          d={calcCurvePath(
-            radius,
-            borderAdjusted,
-            startAngle,
-            scale($animatedValue, start, stop, startAngle, stopAngle)
-          )}
-        />
-      {/if}
-
       <!-- Segments -->
       {#each segments as segment, index}
         <g
@@ -185,10 +172,23 @@
         </g>
       {/each}
 
+      <!-- Progress arc -->
+      {#if value != undefined || $animatedValue != 0}
+        <path
+          class="gauge-progress"
+          d={calcCurvePath(
+            radius,
+            borderAdjusted,
+            startAngle,
+            scale($animatedValue, start, stop, startAngle, stopAngle)
+          )}
+        />
+      {/if}
+
       <!-- Handle -->
       {#if value != undefined || $animatedValue != 0}
         <circle
-          class="gauge-indicator"
+          class="gauge-pointer"
           cx={handlePos.x}
           cy={handlePos.y}
           r={stroke / 2}