SVG text align browser support

I had a task to build an online editor for creating graphic content, like visit cards. I chose to work with svg. All svg elements (e.g. line, rectangle, circle etc.) are positioned in a parent component with x and y attributes (like in a coordinate system). I wanted to have a text element with a rectangle around it which indicates that the text is in edit mode. In order to position the text inside the rectangle, I had to calculate x and y values. The problem was that the point that is taken to position the text is at the beginning of a text (before first letter) and at the baseline of the text. What I wanted to have is that this point is exactly in the middle of text (vertically and horizontally). I adjusted the point horizontally, but the problem was adjusting it vertically. I used svg attribute alignment-baseline=“middle” and it worked in Chrome, but when I opened the svg in some other browser, it acted different. The reason for that was that some svg attributes are not supported in all browsers. I searched for another solution and I found another attribute, dominant-baseline=“central”. There is a lot more examples of poorly support for svg attributes in different browsers. My recommendation is to test the svg code as soon as it is done in all targeted browsers, because later it can be hard to find a solution for a lot of bugs that are mutually dependent.