背景關系：我想使用一個由兩個圓圈組成的 SVG 顯示一個圓環圖：
- 兩個圓圈都動態填充了一個 CSS 變數（以百分比表示）。
Everythings 在 PC 和 Android (chrome) 上運行良好。
使用 iPhone 觀看時，綠色圓圈被完全填充，灰色圓圈被隱藏。
下面是用 IOS 手機看到的結果（試過 Safari 和 Chrome）：
這是一個片段，綠色占 45%，灰色占 75%
代碼 ：
:root {
--val: 0;
}
svg {
transform: rotate(135deg);
}
.percent {
stroke-dasharray: 100;
stroke-dashoffset: calc(100 - var(--val));
}
.white {
transform: rotate(135deg)
}
.forty-five{
--val: 45;
}
.complete {
--val: 75;
}<div class="svg-container">
<svg width="250" height="250" viewBox="0 0 140 140">
<circle class="percent complete" cx="70" cy="70" r="52" fill="none" stroke="#e6e6e6" strokeWidth="18" pathLength="100" />
<circle class="percent" cx="70" cy="70" r="52" fill="none" stroke="#333" strokeWidth="18" pathLength="100" />
<circle class="percent forty-five" cx="70" cy="70" r="52" fill="none" stroke="#6AA617" strokeWidth="18" pathLength="100" />
</svg>
</div>任何建議或任何其他方式來獲得這個結果？
編輯：我剛剛發現在 PC 上使用 Firefox 時存在同樣的問題
uj5u.com熱心網友回復：
正如@A Haworth已經指出的那樣：對 svg 屬性的
csscalc支持仍然參差不齊（可能在 Chrome 中有效，但在 Firefox 中無效——也可能取決于實際的 svg 元素和某些屬性。
在不久的將來可能會修復且可以忽略不計......除非即回傳）。
但無論如何，你并不真的需要它。
由于您的馬蹄規應該只渲染 360° 圓的 270°，您可以改為調整pathLength屬性：
理想pathLength值為 133.333
360/270*100
（即圓的 270° 部分將導致計算出的周長為 100 svg 單位）
現在您可以使用 css-variable 來顯示基于百分比的值：
:root {
--val: 100;
--dashGap: 133.333;
--offset: 0;
}
svg {
transform: rotate(135deg);
}
.percent {
stroke-dashoffset: var(--offset);
stroke-dasharray: var(--val) var(--dashGap)
}<div class="svg-container">
<svg width="250" height="250" viewBox="0 0 140 140">
<defs>
<circle id="circle" cx="70" cy="70" r="52" fill="none" pathLength="133.333" stroke-width="18" />
</defs>
<!-- bg circle -->
<use class="percent complete" href="#circle" stroke="#e6e6e6" />
<!-- percentage circles -->
<use class="percent" href="#circle" stroke="green" style="--val:50"/>
<use class="percent" href="#circle" stroke="pink" style="--val:25; --offset:-50" />
</svg>
</div>如果您需要逐步渲染值，例如 50% 25%（總共 75%），您可以使用stroke-dahoffset變數。
每個新段需要根據先前段的百分比有一個負偏移量。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/489939.html