Как поместить текст по центру внутри group в svg?

3570

13 февраля 2020, 01:30

Как поместить текст по центру внутри g?

Вот тут нужно чтобы текст "Текст по центру" был по центру группы <g class="point""> https://jsfiddle.net/wpvk3c64/4/

Чтобы получилось

Answer 1

Есть одно но, размеры группы зависят от расположения элементов в ней, по-этому я вынес текст за пределы группы, в остальном алгоритм простой:

Я посчитал точку привязки и расположил текст по центру относительно нее при помощи text-anchor="middle" dominant-baseline="middle"

let bbox = document.querySelector('svg g.point').getBBox(); 
let text = document.querySelector('svg text'); 
text.setAttributeNS(null, "x", bbox.x+bbox.width/2); 
text.setAttributeNS(null, "y", bbox.y+bbox.height/2);

<svg width="400" height="400"> 
    <g class="point"> 
      <circle></circle> 
      <rect x="10" y="10" width="100" height="100"/> 
      <rect x="140" y="10" width="100" height="100" fill="green"/> 
    </g> 
    <text font-size=30 fill="red" class="pointIndex" text-anchor="middle" dominant-baseline="middle"> 
      Текст по центру 
    </text> 
  </svg>

PS: можно ничего не считать а отталкиваться от размеров самой svg, то есть поставить его по центру самой картинки <text x="50%" y="50%".