SVG -每个路径/形状的中心文本

Question

我能够显式地为每条路径/形状居中文本，但我不想对每个路径/形状做数学运算。下面的代码我已经试过了，但是它只是将两个文本放在另一个上面，如果它指的是一个<svg>，而不是每个<g>或<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>

我也尝试过anchor-text和baseline-alignment，但是仍然需要显式的x和y值。

Answer 1

嗯。最后我只是通过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>

​

​