如何制作含两个重叠形状、带孔洞且无透明叠加变暗问题的SVG图标

问题根因 #

两个携带alpha通道的同色半透明层重叠时，重叠区域的透明度会叠加，最终视觉表现为颜色比非重叠区域更深，这是半透明颜色混合的正常特性。

可选解决方案 #

方案一：无重叠绘制（最优，即你最终采用的实现） #

调整内层进度条的尺寸和位置，让它完全处于边框内部、和边框无任何重叠，从根源避免颜色叠加问题：

• 优势：无额外SVG特性依赖、兼容性最好、性能开销最低
  你的最终实现代码如下，完全可以满足需求：

body { background-color: #eee; color: rgba(0, 0, 0, 0.7); }

<svg viewBox="0 0 44 18" width="220" height="90">
  <rect x="2" y="2" width="40" height="11" rx="3" ry="3"
        stroke="currentColor" stroke-width="2" fill="transparent" />
  <rect x="4" y="4" width="23" height="7" rx="2" ry="2" fill="currentColor" />
</svg>

方案二：组统一透明度（无需调整原有形状坐标，适合复杂图形） #

如果图形结构复杂，不好拆分重叠部分，可以将所有重叠形状放到同一个<g>组中，统一设置组的透明度，避免分层叠加：

body { background-color: #eee; color: rgba(0, 0, 0, 0.7); }
svg .progress-group {
  /* 提取currentColor的RGB分量，设置为完全不透明 */
  --pure-color: rgb(from currentColor r g b);
  /* 提取currentColor的alpha分量作为组全局透明度 */
  opacity: calc(alpha from currentColor);
}
svg .progress-group rect {
  stroke: var(--pure-color);
  fill: var(--pure-color);
}

<svg viewBox="0 0 44 18" width="220" height="90">
  <g class="progress-group">
    <rect x="2" y="2" width="40" height="11" rx="3" ry="3"
          stroke-width="2" fill="transparent" />
    <rect x="2" y="2.5" width="24" height="10" />
  </g>
</svg>

注：该方案用到的CSS相对颜色语法，目前Chrome 111+、Firefox 113+、Safari 16.4+版本均支持

方案三：遮罩实现（兼容性更好的原生SVG方案） #

如果需要兼容旧版本浏览器，可以使用mask遮罩实现统一着色，你之前的clipPath方案失效是因为clipPath默认只识别元素的fill区域，不会计入stroke范围，换成mask即可正常识别：

body { background-color: #eee; color: rgba(0, 0, 0, 0.7); }

<svg viewBox="0 0 44 18" width="220" height="90">
  <defs>
    <mask id="progressMask">
      <!-- 遮罩中白色区域对应上层颜色可见区域 -->
      <rect x="2" y="2" width="40" height="11" rx="3" ry="3"
            stroke="white" stroke-width="2" fill="transparent" />
      <rect x="2" y="2.5" width="24" height="10" fill="white" />
    </mask>
  </defs>
  <!-- 单个矩形统一填充currentColor，通过遮罩裁剪出目标形状 -->
  <rect width="100%" height="100%" fill="currentColor" mask="url(#progressMask)"/>
</svg>

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