html - 为什么最后一个圆圈比其他圆圈更大胆？

Question

我有三个具有相同 stroke-width 的圆形 svg 元素，但最后一个更粗。
这是 svg 代码:

<div>
    <svg width="114" height="114">
        <circle stroke="#6d86c7" stroke-dashoffset="62.02111948377269" stroke-dasharray="62.02111948377269,258.4213311823862" r="51" cx="50%" cy="50%"></circle>
        <circle stroke="#e05c5c" stroke-dashoffset="165.38965195672716" stroke-dasharray="103.36853247295448,217.07391819320443" r="51" cx="50%" cy="50%"></circle>
        <circle stroke="#f6a623" stroke-dashoffset="320.4424506661589" stroke-dasharray="155.05279870943173" r="51" cx="50%" cy="50%"></circle>
    </svg>
</div>

结果是这样的:

.

似乎最后一个总是更大胆......

Answer 1

发生这种情况的原因是因为所有三个圆圈都有一个白色的 fill。在绘制每个圆圈时，白色填充会覆盖先前圆圈笔划的内部部分。请记住，绘制笔划时，它们一半在圆圈内，一半在圆圈外。

解决方案是只将白色填充放在三个圆圈中的第一个。

#first circle {
  stroke-width: 4px;
  fill: none;
}

#first circle:nth-child(1) {
  fill: #fff;
}

<div id="first">
  <svg width="114" height="114">
    <circle stroke="#6d86c7" stroke-dashoffset="62.02111948377269" stroke-dasharray="62.02111948377269,258.42133118 23862" r="51" cx="50%" cy="50%"></circle>
    <circle stroke="#e05c5c" stroke-dashoffset="165.38965195672716" stroke-dasharray="103.36853247295448,217.07391819320443" r="51" cx="50%" cy="50%"></circle>
    <circle stroke="#f6a623" stroke-dashoffset="320.4424506661589" stroke-dasharray="155.05279870943173,165.38965195672712" r="51" cx="50%" cy="50%"></circle>
  </svg>
</div>