Ensuring Adaptive Occlusion Positioning During Browser Resizing

Anki Card Design
1

I have set up an occlusion using the following code in the field. However, when the browser window is resized, the occlusion area shifts slightly (only a minor displacement, with the occlusion area shrinking proportionally as expected). How can I make it adaptive to ensure that the occlusion remains in place without shifting?

<figure style="position:relative" class="image">
    <img src="page7.png">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="2382" height="3368" viewBox="0 0 2382 3368" xml:space="preserve" class="image-cover" style="width: 100%; height: 100%; position: absolute; inset: 0px;">
        <desc data-image-cover="1"></desc>
        <g transform="translate(1236,581.2999954223633)">
            <rect style="stroke: rgb(129,198,107); stroke-width: 2; fill: rgb(129,198,107);" x="-48" y="-26.5" width="96" height="53"></rect>
        </g>
    </svg>
</figure>