椭圆在SVG蒙版中无法正常工作

Question

虽然我绝对相信这是我想念的东西，但我的SVG蒙版存在问题。

我有一个简单的挂锁图标的SVG（链接到下面的JSFiddle）之前工作正常，但现在锁孔的椭圆部分不起作用。我在面具中将填充设置为黑色。

我尝试了很多东西，包括将整个底部部分改为路径（它看起来不正常），将遮罩更改为剪辑路径（与我想要的相反）甚至交换椭圆和多边形。没有任何效果。

Here's a JSFiddle of the icon.

代码：

<svg viewBox="0 0 32 32" version="1.1" width="256" height="256" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="lock-mask">
            <rect x="0" y="0" width="32" height="32" fill="white" />
            <ellipse cx="16" cy="19" rx="3" ry="2" fill="black" />
            <polygon points="15,20 14,26 18,26 17,20" fill="black" />
        </mask>
    </defs>

    <rect x="2" y="13" width="28" height="16" rx="2" ry="2" mask="url(#lock-mask)" />
    <path d="M6.5 14 V 9 A 10 6 0 0 1 25.5 9 V 14 H 22.5 V 9 A 8 5 0 0 0 9.5 9 V 14 Z" />
</svg>