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

3507
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%".

READ ALSO
Изменить стиль содержания innerHTML [закрыт]

Изменить стиль содержания innerHTML [закрыт]

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение

3366
IIS сервер не отдаёт файл

IIS сервер не отдаёт файл

На IIS Express все работает отличноПереношу на сервер - при попытке скачать файл пишет "Не удалось скачать"

3490
Как создать файл в директории

Как создать файл в директории

Я в программе узнаю директорию в какой расположен исполняемый файл программы, как создать в ней текстовый файл?

3404