1

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

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

Чтобы получилось введите сюда описание изображения

0

1 ответ 1

2

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

Я посчитал точку привязки и расположил текст по центру относительно нее при помощи 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%".

2
  • А без программирования как можно реализовать?
    – manking
    26 апр 2019 в 6:38
  • по отнощению к группе - я не знаю такого способа 26 апр 2019 в 6:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.