I have a conundrum which might derail my entire svg project

I have spent a few days redesigning my header completely in svg code.

I have text overlaying a rectangle (the rectangle is a certain width).

But how can I get the text to be the same width in all browsers and all fonts?
I tried using the textLength but I got a different result in firefox vs ie or Safari.

Of course if it was html I would just put the text inside the rectangle, but I can't with svg as far as I know.

Nevermind, I worked out an acceptable solution to this.

I was using <text> with <tspan>'s including spaces.
When I just used two <text>'s without <tspans> it works well enough with different fonts to be good enough.