SVG: Text Centerd Differently In FF And Chrome

I have the following SVG content

Solution 1:

Add dominant-baseline="middle" and edit your code like this:

 <text alignment-baseline="middle" dominant-baseline="middle" text- 
    anchor="middle" x="50%" y="50%">
     missing 
 </text>

Link to documenttion

Here's the codepen snippet that I tested in both Chrome and Firefox.

Share