How to center a SVG text vertically (in different browsers)

Question

I'm trying to build a animation that resembles this concept:

Text Mask

Because I want to be able to set the SVG text dynamically I can't use the exact same implementation.

My issue atm lies in the placement of the SVG text. I was able to create a mask with a text that can be dynamically set. But I can't find a way to make the text fully centred (vertically).

Using dominant-baseline:central seems to be a good direction but the text still is not fully centered on the vertical plane. Especially when the text size increases (which will be the case when scrolling) it comes more and more apparent that the text is not centered. Furthermore there seems to be quite a discrepancy in what dominant-baseline:central does in Chromium and Firefox. Firefox seems to render the text more to the top, which makes it seem even more off.

I created a example to illustrate the problem.

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
}

body {
  height: 100vh;
}

img {
  width: 100%;
  height: 100%;
}

.mask {
  position: relative;
  height: 100%;
  width: 100%;
  border: 5px solid hotpink;
}

.mask__svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.mask__svg .mask__text {
  text-anchor: middle;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 60rem;
  font-weight: bold;
}

.mask__svg .mask__rect {
  mask: url(#svg-mask);
  fill: white;
}

<div class="mask">
  <img src="https://images.unsplash.com/photo-1691520673295-9626f624869b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" />
  <svg class="mask__svg">
    <defs>
      <mask id="svg-mask" x="0" y="0" width="100%" height="100%">
        <rect class="mask__rect" x="0" y="0" width="100%" height="100%" fill="white" />
        <text class="mask__text" x="50%" y="50%" text-anchor="middle" dominant-baseline="central">MASK</text>
      </mask>
    </defs>
    <rect class="mask__rect" x="0" y="0" width="100%" height="100%" />
  </svg>
</div>

I used dominant-baseline with different values. I tried playing around with dy. I tried to position the SVG with different methods. The version in the code snippet is the closest I got to fully centering the SVG text.