我正在绘制一个SVG椭圆，我想要两个间隙，位于顶部和底部的中心：
<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"/>
但是我希望间隙边缘是垂直的，就像我画了一条穿过未间隙椭圆的直线：
<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>
我不能那样做，因为这条线是不透明的。这些间隙应该看起来像什么都没有画出来，并且不会改变或覆盖背景。
进一步失败的实验：
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.
我能做什么？
jsfiddle
这是使用掩码的典型情况。与遮罩的白色部分重合的所有内容都按原样绘制，与黑色部分重合的任何内容都变为透明。
<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>