如何设置SVG circle的stroke opacity且无描边填充重叠的内圈效果

问题原因 #

SVG 中的描边默认沿路径居中绘制，描边宽度的一半会覆盖在填充区域上方，设置半透明描边时，重叠区域会出现颜色混合，就是你遇到的内圈重叠效果。

方案1：使用paint-order调整绘制顺序（推荐） #

通过paint-order属性设置描边先于填充绘制，填充会完全盖住描边重叠在内侧的部分，仅保留外侧半透明描边，直接在原有代码上添加一行属性即可：

svg {
  width: 200px;
}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" style="
    stroke-width: 10;
    stroke: purple;
    stroke-opacity: 0.5;
    fill: green;
    paint-order: stroke; /* 新增这行即可 */
"></circle>
</svg>

方案2：拆分元素实现（兼容老旧浏览器） #

如果需要兼容不支持paint-order的旧版本浏览器，可以拆分两个圆形分别处理填充和描边，描边圆形的半径调整为「填充半径 + 1/2描边宽度」，同时描边圆形设置fill: none，完全避免重叠：

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 负责填充的圆形 -->
  <circle cx="50" cy="50" r="40" fill="green"></circle>
  <!-- 负责描边的圆形，半径 = 40 + 10/2 = 45 -->
  <circle cx="50" cy="50" r="45" style="
    stroke-width: 10;
    stroke: purple;
    stroke-opacity: 0.5;
    fill: none;
"></circle>
</svg>

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