SVG环形饼图在iOS、火狐浏览器显示异常如何解决

跨端渲染异常的核心原因是：SVG的pathLength属性在iOS全系列浏览器（Safari、iOS端Chrome）、Firefox部分版本中，无法将自定义路径长度同步到CSS的描边虚线计算逻辑。
你原本通过pathLength="100"把圆形路径总长度归一为100，想直接用0-100的数值对应百分比控制描边长度，但上述浏览器不会识别这个自定义属性值，仍然按照圆形的实际物理周长计算stroke-dasharray和stroke-dashoffset，最终导致描边完全填满、遮挡下层元素。

方案1：最小改动兼容原有SVG实现 #

不需要调整DOM结构，只需要放弃依赖pathLength属性，直接基于圆形的实际周长做百分比换算即可。圆形周长公式为2 * π * 半径，你的代码中圆形半径为52，计算得周长约为326.73，以此为基准调整CSS计算逻辑即可，原有CSS变量传百分比的使用方式完全保留。
修复后完整代码：

:root {
  --val: 0;
  /* 圆周长 = 2 * π * r = 2 * 3.1416 * 52 ≈ 326.73，后续改半径时同步更新这个值即可 */
  --circumference: 326.73;
}

svg {
  /* 保留原有旋转角度，和预期效果起点一致 */
  transform: rotate(135deg);
}

.percent {
  fill: none;
  stroke-width: 18;
  stroke-dasharray: var(--circumference);
  stroke-dashoffset: calc(var(--circumference) * (1 - var(--val) / 100));
}

.forty-five{
  --val: 45;
  stroke: #6AA617;
}

.complete {
  --val: 75;
  stroke: #e6e6e6;
}

<div class="svg-container">
  <svg width="250" height="250" viewBox="0 0 140 140">
    <circle class="percent complete" cx="70" cy="70" r="52" />
    <circle class="percent" cx="70" cy="70" r="52" stroke="#333" />
    <circle class="percent forty-five" cx="70" cy="70" r="52" />
  </svg>
</div>

注意：代码里已经移除了circle标签上的pathLength属性，避免不同浏览器的解析差异。

方案2：纯CSS实现（无SVG兼容问题） #

如果不需要兼容IE等极老旧浏览器，使用CSS圆锥渐变实现甜甜圈饼图更简洁，完全不存在SVG属性兼容问题，百分比控制更直接：

.donut {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  /* 通过CSS变量动态控制各段占比 */
  --green: 45%;
  --gray: 75%;
  background: conic-gradient(
    #6AA617 0 var(--green),
    #e6e6e6 var(--green) var(--gray),
    transparent var(--gray) 100%
  );
  position: relative;
}
/* 中心空心做甜甜圈效果 */
.donut::after {
  content: "";
  position: absolute;
  inset: 18px; /* 描边宽度18px */
  background: #fff;
  border-radius: 50%;
}

<div class="donut"></div>

动态修改占比时，只需要更新对应CSS变量的值即可，全平台浏览器（iOS、Firefox、Chrome、安卓端）表现完全一致。

内容的提问来源于stack exchange，提问作者Boris BELLOC