我試圖創建一個圓形的進度條，其中的變量可以用內嵌的樣式來控制。進度條將有兩個不同的條，應該加在一起，但仍然是不同的顏色。

這些變量獨立工作:

.card svg circle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #f0f0f0;
  stroke-width: 10;
  stroke-linecap: round;
  
  --laresult: calc(625px - (625px * var(--lapercent)) / 34);
  --saresult: calc(625px - (625px * var(--sapercent)) / 34);
}

.card svg circle.la { 
  stroke-dasharray: 625px;
  stroke-dashoffset: var(--laresult);
  stroke: blue; 
}

.card svg circle.sa {
  stroke-dasharray: 625px;
  stroke-dashoffset: var(--saresult); 
  stroke: pink; 
}

但是我不希望線條重疊，我希望它們看起來像是堆疊在一起的。所以，對于第二個進度條，我想把這兩個加在一起。但是，當我嘗試添加它們時，它就壞了:

.card svg circle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #f0f0f0;
  stroke-width: 10;
  stroke-linecap: round;
  
  --laresult: calc(625px - (625px * var(--lapercent)) / 34);
  --saresult: calc(625px - (625px * var(--sapercent)) / 34);
}

.card svg circle.la { 
  stroke-dasharray: 625px;
  stroke-dashoffset: var(--laresult);
  stroke: blue; 
}

.card svg circle.sa {
  stroke-dasharray: 625px;
  stroke-dashoffset: calc(var(--saresult) + var(--laresult)); 
  stroke: pink; 
}

代碼筆:https://codepen.io/camilapaleno/pen/WNaggpb

看到codepen中的HTML，我看到每個元素中都定義了變量:

<svg>
      <circle cx="105" cy="105" r="100"></circle>
      <circle class="la" cx="105" cy="105" r="100" style="--lapercent: 12"></circle>
      <circle class="sa" cx="105" cy="105" r="100" style="--sapercent: 5"></circle>
</svg>

我認為問題是需要兩個變量的元素沒有辦法& quot參見& quot另一個變量的值，因為它超出了范圍(- laresult無法計算，因為- lapercent未定義)。在檢查器中，可以看到它沒有被定義:

如果以這種方式定義父元素中的變量...

<svg style="--lapercent: 12; --sapercent: 5">
      <circle cx="105" cy="105" r="100"></circle>
      <circle class="la" cx="105" cy="105" r="100" ></circle>
      <circle class="sa" cx="105" cy="105" r="100"></circle>
</svg>

...變量如下所示:

我發現了這個。有兩個問題:

就像Temani Afif說的，增加兩個變量是不正確的。我需要一種新的配方。

--laresult: calc(625px - (625px * var(--lapercent)) / 34);
  --saresult: calc((625px - (625px * (var(--sapercent) + var(--lapercent))) / 34));

第二個問題是進度條不能訪問第一個變量，因為我只在第一個進度條中聲明了它。在兩個進度條中聲明兩者都有效:

<circle class="sa" cx="105" cy="105" r="100" style="--lapercent: 12; --sapercent: 5"></circle>
<circle class="la" cx="105" cy="105" r="100" style="--lapercent: 12; --sapercent: 5"></circle>