CODEWITHSUNDEEP
svgfill
user2667066
user2667066

Reputation: 2079

SVG fill-rule cutout with different stroke widths

I want to produce a circle cut out of another circle, as in two rightmost cases in the SVG spec at http://www.w3.org/TR/SVG/images/painting/fillrule-evenodd.svg. But I want the outer circle to have a different, thicker stroke width to the inner circle. I can't work out how to do this by keeping both circles in the same path definition. If, however, I separate out the two circles into different path tags, the fill-rule subtraction won't work. Is there any possible solution? I'm disinclined to overwrite with darker lines, as in my use case, the outer circle is actually a much more complex shape, which I don't want to define twice.

Upvotes: 1

Views: 773

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

There is no way to do this with just a single path.

You need to use a second path, with a stroke but no fill, to add the thicker of the two strokes.

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

Upvotes: 1

Related Questions