[SOLVED] How to use masks with in-document svg to mask div?

How to use masks with in-document svg to mask div?

I am trying to get the mask to cover the entire containing div, which can be of variable size, ie it can change later. I need the svg to maintain aspect ratio and be positioned in the center of the containing 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

The above solution is not working, neither is it covering the the parent div, nor is it centered. What I expected to happen was a a white circle centered in a fully filled black box with red borders.

this question is similar to this but there has not been an answer in 3 years. I am also considering animating the circle element, so using CSS with inline svg is not ideal.

I think this line in the docs may be useful but I am not sure how to use this information.

If the mask-size is contain or cover:
The image is rendered by preserving its intrinsic proportion at the largest size contained within or covering the mask positioning area. If the image has no intrinsic proportion, then it is rendered at the size of the mask positioning area.

UPDATE: I have been able to solve the width issue, but for some reason, the height 100% isnt filling the height.

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

Solution

I am not sure why my update previously worked, but for some reason, it had a fixed size of 300x150 even though I never set it anywhere. I found this out when i switched around the height width of the container (the one with the border). setting the height and width of the svg works.

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