为何无法在CSS的calc()中对两个自定义变量进行相加运算？

问题根源 #

你当前的变量计算逻辑有误：--laresult和--saresult都是「总周长减去对应百分比长度」的结果，直接相加会得到远超合理范围的偏移值，导致进度条显示异常。

要实现蓝色段在前、粉色段紧随其后的堆叠效果，粉色进度条的偏移值需要基于蓝色段的结束位置计算，而不是简单叠加两个变量。

修正代码 #

.card svg circle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #f0f0f0;
  stroke-width: 10;
  stroke-linecap: round;
  
  /* 先计算两段各自的实际显示长度 */
  --la-length: calc((625px * var(--lapercent)) / 34);
  --sa-length: calc((625px * var(--sapercent)) / 34);
  /* 蓝色进度条偏移：总周长 - 自身长度 */
  --laresult: calc(625px - var(--la-length));
  /* 粉色进度条偏移：总周长 - 蓝色长度 - 自身长度（从蓝色结束位置开始） */
  --saresult: calc(625px - var(--la-length) - var(--sa-length));
}

.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; 
}

关键说明 #

• 拆分出--la-length和--sa-length变量，明确两段进度条的实际绘制长度，让逻辑更清晰
• 粉色进度条的偏移值需要扣除蓝色段已占用的长度，这样才会从蓝色段的末尾开始绘制，实现堆叠而非重叠
• 注意控制--lapercent与--sapercent的总和不超过34（因为你的计算规则是34对应100%总周长），避免进度条超出圆形范围

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