如何使用文档内的 svg 蒙版来蒙版 div？

Question

我试图让掩码覆盖整个包含的div，它可以是可变大小的，即它可以稍后更改。我需要 svg 来保持纵横比并放置在包含 div 的中心。

<div style="
    border: 2px solid red;
    height: 200px;
    width: 300px;
">
    <div
        style="
            height: 100%;
            width: 100%;
            background-color: black;
            mask: url(#curtain) center center / cover no-repeat;
        "
    >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <defs>
                <mask id="curtain">
                    <rect fill="white" x="0" y="0" width="100" height="100" />
                    <circle fill="black" cx="50" cy="50" r="20" />
                </mask>
            </defs>
        </svg>
    </div>
</div>

https://codepen.io/FieryRMS/pen/OPLWZWw

上面的解决方案不起作用，既没有覆盖父div，也没有居中。我期望发生的是一个白色圆圈，其中心是一个完全填充的带有红色边框的黑框。

这个问题与this类似，但已经3年没有答案了。我也在考虑对圆形元素进行动画处理，因此使用 CSS 和内联 svg 并不理想。

我认为docs中的这一行可能有用，但我不确定如何使用这些信息。

如果掩模尺寸是包含或覆盖：
通过在掩模定位区域内包含或覆盖掩模定位区域的最大尺寸下保留其固有比例来渲染图像。如果图像没有固有比例，则按掩模定位区域的大小进行渲染。

更新： 我已经能够解决宽度问题，但由于某种原因，高度

100%

没有填满高度。

<div style="border: 2px solid red; height: 200px; width: 300px">
    <div
        style="height: 100%; width: 100%; background-color: black; mask: url(#curtain) center center / cover no-repeat"
    >
        <svg xmlns="http://www.w3.org/2000/svg">
            <mask
                id="curtain"
                maskUnits="objectBoundingBox"
                maskContentUnits="userSpaceOnUse"
                x="0"
                y="0"
                width="1"
                height="1"
            >
                <rect x="0" y="0" width="100%" height="100%" fill="white" />
                <circle cx="50%" cy="50%" r="25" fill="black" />
            </mask>
        </svg>
    </div>
</div>

Answer 1

我不确定为什么我的更新以前有效，但由于某种原因，它的固定大小为 200x150，即使我从未在任何地方设置它。当我切换容器（有边框的容器）的高度宽度时，我发现了这一点。设置 svg 的高度和宽度。

<div style="border: 2px solid red; height: 300px; width: 600px">
<div
    style="height: 100%; width: 100%; background-color: black; mask: url(#curtain) center center / cover no-repeat"
>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
        <mask
            id="curtain"
            maskUnits="objectBoundingBox"
            maskContentUnits="userSpaceOnUse"
            x="0"
            y="0"
            width="1"
            height="1"
        >
            <rect x="0" y="0" width="100%" height="100%" fill="white" />
            <circle cx="50%" cy="50%" r="25" fill="black" />
        </mask>
    </svg>
</div>
</div>