具有不同笔划宽度的 SVG 填充规则切口

Question

我想从另一个圆中切出一个圆，就像 http://www.w3.org/TR/SVG/images/painting/fillrule-evenodd.svg 的 SVG 规范中最右边的两个例子一样。但是我希望外圆的笔画宽度与内圆不同，更粗。我无法通过将两个圆圈保持在同一路径定义中来弄清楚如何做到这一点。但是，如果我将两个圆圈分成不同的路径标记，则填充规则减法将不起作用。有什么可能的解决办法吗？我不愿意用更深的线条覆盖，因为在我的用例中，外圈实际上是一个更复杂的形状，我不想定义两次。

Answer 1

仅用一条路径无法做到这一点。

您需要使用第二条路径（有笔划但没有填充）来添加两个笔划中较粗的一个。

<svg width="12cm" height="4cm" viewBox="0 0 1200 400">
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" />
  <g fill-rule="evenodd" fill="red" stroke="black" stroke-width="3" >
    <path d="M 950,81 A 107,107 0 0,1 950,295 A 107,107 0 0,1 950,81 z
             M 950,139 A 49,49 0 0,0 950,237 A 49,49 0 0,0 950,139 z" />
    <path d="M 950,139 A 49,49 0 0,0 950,237 A 49,49 0 0,0 950,139 z"
          fill="none" stroke-width="16"/>
  </g>
</svg>

具有不同笔划宽度的 SVG 填充规则切口

SVG fill-rule cutout with different stroke widths

svg

fill