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 that you have read and understand our privacy policy and code of conduct.

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