Text svg is not vertically centered in ms edge - html

Question

Maybe somebody knows this case when text doesn't center vertically inside svg block
<pre>
<svg class="mask-text category-title" viewBox="0 0 69.34375 18"><defs><mask id="mask" x="0" y="0" width="100%" height="100%"><text class="svg-text" dominant-baseline="central" text-anchor="middle" x="50%" y="50%" font-family="Sans-serif" font-weight="900" fill="white">Colour</text></mask></defs><text class="svg-text" dominant-baseline="central" text-anchor="middle" x="50%" y="50%" font-family="Sans-serif" font-weight="900" fill="white">Colour</text>
<image class="svg-img" width="100%" height="100%" mask="url(#mask)" xlink:href="/uploads/vendor_groups/images/viz1.jpeg?width=1024&height=643" preserveAspectRatio="xMidYMid slice"></image>
</svg>
</pre>
I tried alignment-baseline and <text y="50%" x="50%" but it doesn't work

Answer 1

In the header of the svg write width="100vw" height="100vh"
In this case, vertical centering will work for the text with x="50%" and alignment-baseline
<pre>
<svg class="mask-text category-title" width="100vw" height="100vh" viewBox="0 0 69.34375 18"><defs><mask id="mask" x="0" y="0" width="100%" height="100%"><text class="svg-text" dominant-baseline="central" text-anchor="middle" x="50%" y="50%" font-family="Sans-serif" font-weight="900" fill="white">Colour</text></mask></defs><text class="svg-text" dominant-baseline="central" text-anchor="middle" x="50%" y="50%" font-family="Sans-serif" font-weight="900" fill="white">Colour</text>
<image class="svg-img" width="100%" height="100%" mask="url(#mask)" xlink:href="/uploads/vendor_groups/images/viz1.jpeg?width=1024&height=643" preserveAspectRatio="xMidYMid slice"></image>
</svg>
</pre>
Now in the browser window there is a frame relative to which it can calculate the vertical midpoint for the text <text y="50%"
UPDATE
You probably wanted to use text as a mask to fill the text with a cropped image.
As it turned out, the format of your image does not load.
So I took another image with exactly the same size as your image with 1024 X 643
<image class="svg-img"
xlink:href="https://i.stack.imgur.com/mlqrC.jpg" width="1024" height="643" mask="url(#mask)">
</image>
Your program had an extra line of text; I commented it out.
The font size was not specified, I chose font-size="250px"
Below is code that is responsive and works in all modern browsers except Edge
<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg class="mask-text category-title" viewBox="0 30 1024 643" preserveAspectRatio="xMidYMid meet" >
<defs>
<mask id="mask" x="0" y="0" width="100%" height="100%" >
<rect width="100%" height="100%" fill="black" />
<text class="svg-text" font-size="250px" dominant-baseline="central" text-anchor="middle" x="50%" y="50%" font-family="Sans-serif" font-weight="900" fill="white">Colour</text>
</mask>
</defs>
<!-- <text class="svg-text" dominant-baseline="central" font-size="200px" text-anchor="middle" x="50%" y="50%" font-family="Sans-serif" font-weight="900" fill="white">Colour</text> -->
<image class="svg-img"
xlink:href="https://i.stack.imgur.com/mlqrC.jpg" width="1024" height="643" mask="url(#mask)">
</image>
</svg>
</div>
Edge scales and centers the image in a very peculiar way
So I had to replace the percent x = "50%" and y = "50%" with fixed values
In this version of the code, the application remains responsive and works in all modern browsers including Edge
<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg class="mask-text category-title" viewBox="0 30 1024 643" preserveAspectRatio="xMidYMi meet">
<defs>
<mask id="mask" x="0" y="0" width="100%" height="100%" >
<rect width="100%" height="100%" fill="black" />
<text class="svg-text" dominant-baseline="central" font-size="250px" text-anchor="middle" x="512px" y="300px" font-family="Sans-serif" font-weight="900" fill="white">Colour</text>
</mask>
</defs>
<!-- <text class="svg-text" dominant-baseline="central" font-size="250px" text-anchor="middle" x="50%" y="50%" font-family="Sans-serif" font-weight="900" fill="white">Colour</text> -->
<image class="svg-img"
xlink:href="https://i.stack.imgur.com/mlqrC.jpg" width="1024" height="643" mask="url(#mask)">
</image>
</svg>
</div>
The size of the entire text block can be changed by edited the width,height in the parent block - .container