SVG - Center text for each path/shape - svg

Question

I'm able to center text for each path/shape explicitly, but I don't want to do the math for each one. I've tried this the code below but it just puts the two texts on top of one another, which would make sense if it's referring to the one <svg> and not each <g> or <path>.
<svg viewBox="0 0 91.742 214.2" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#000" stroke-width="1">
<g>
<text class="room-text" x="50%" y="50%">145</text>
<path class="room" d="m 0.134593,0.134751 2.2679,133.799999 86.179,0.75595 -5.2917,-133.049999 z"/>
</g>
<g>
<text class="room-text" x="50%" y="50%">146</text>
<path class="room" d="m 2.402593,133.94175 0.75595,80.131 88.446,-0.75594 -3.0238,-78.619 z"/>
</g>
</svg>
I've also tried anchor-text and baseline-alignment but an explicit x and y value are still needed.

Answer 1

Yeah. I ended up just doing it through JavaScript.
document.addEventListener("DOMContentLoaded", function(event) {
var svg = document.getElementById("svg");
/***** Get the room box and text box *****/
for (i = 1; i < svg.childNodes[1].childNodes.length; i += 2) {
var room = svg.childNodes[1].childNodes[i].childNodes[3]; // path element
var textbox = svg.childNodes[1].childNodes[i].childNodes[1]; // text element
var new_x = document.createAttribute("x"); // make a new attribute to add to the textbox
new_x.value = room.getBBox().width / 2 + room.getBBox().x - textbox.getBBox().width / 2; // calculate the textbox's new x position
textbox.setAttributeNode(new_x) // assign the textbox the new x value
}
});
body {
box-sizing: border-box;
}
.main {
width: 100%;
}
svg {
display: block;
margin: 0 auto;
width: 400px;
height: 400px;
}
.room {
fill: rgba(220, 220, 220, .4);
}
.room:hover {
fill: rgba(0, 255, 255, 0.4);
}
.room-text {
fill: black;
font-size: 14px;
font-family: "Helvetica";
}
<div id="svg">
<svg viewBox="0 0 181.01 255.02" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#000" stroke-width="1">
<g id="r145">
<text class="room-text" y="40">145</text>
<path class="room" d="m0.13374 1.6456 0.75595 68.792 135.32-2.2679-4.5357-68.036z"/>
</g>
<g>
<text class="room-text" y="130">146</text>
<path class="room" d="m0.88969 70.437 29.482 103.57 150.43-3.7798-44.601-102.05z"/>
</g>
<g>
<text class="room-text" y="220">147</text>
<path class="room" d="m30.372 174 42.333 79.375 96.762 1.5119 11.339-84.667z"/>
</g>
</svg>
</div>