ストローク幅が異なるSVG塗りつぶしルールカットアウト

Question

SVG仕様の右端の2つのケースのように、別の円から切り出した円をhttp://www.w3.org/TR/SVG/images/painting/fillrule-evenodd.svgに作成したいとします。 しかし私は、外側の円が内側の円とは違った、より厚いストローク幅を持つことを望んでいます。私は、両方の円を同じパス定義に保つことによってこれを行う方法を考えることはできません。ただし、2つの円を別々のパスタグに分割すると、フィルルールの減算は機能しません。可能な解決策はありますか？私は、暗い線で上書きすることを嫌っています。私の使用例では、外側のサークルは実際はもっと複雑な形です。これは2回定義したくありません。

Answer 1

単一のパスでこれを行う方法はありません。

2つのストロークのうち太い部分を追加するには、ストロークで塗りつぶしのない第2のパスを使用する必要があります。

<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>