Gap SVG circle/ellipse with vertical linecap edges-CodePudding

I am drawing an SVG ellipse and I want two gaps, positioned center top and bottom:

<ellipse fill="none" stroke="black" stroke-width cx="15" cy="15" rx="12.55" ry="13.45" stroke-dasharray="19.65 1.5 39.32 1.5"/>

But I want the gap edges to be vertical, like if I a straight line was drawn through the un-gapped ellipse:

<g stroke-width="1.5">
    <ellipse stroke="black" fill="none" cx="15" cy="15" rx="12.55" ry="13.45"/>
    <path stroke="white" d="M15 35 V30">
</g>

I can't do that, because the line is not transparent. The gaps should look like nothing has been drawn there and not alter or overlay the background.

Further unsuccessful experiments:

stroke-linecap="square" on example #1
stroke="transparent" for the line in ex. #2.
stroke="transparent" stroke-occupacy="1" for the line in ex. #2.

What can I do?

jsfiddle

CodePudding user response：

This is a typical case for using a mask. Everything that coincides with the white parts of the mask is drawn as is, everything that coincides with the black parts becomes transparent.

<svg viewBox="0 0 40 40" height="90vh">
  <mask id="mask">
    <rect width="100%" height="100%" fill="white" />
    <path stroke="black" stroke-width="5" d="M15 35 V0" />
  </mask>
  <ellipse stroke="black" fill="none" stroke-width="1.5"
           mask="url(#mask)"
           cx="15" cy="15" rx="12.55" ry="13.45" />
</svg>