Центрирование текста в SVG - PullRequest
Новая
       35

Центрирование текста в SVG

0 голосов
/ 18 октября 2019

Как я могу центрировать текст по кругу? Моя структура такова: <g><circle ...</><text ...>...</text></g>

Я уже знаю эту технику: <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%"><g><circle cx="50%" cy="50%" r="50%"/><text x="50%" y="50%" text-anchor="middle" dy="0.3em"></text></g></svg>, но это не применимо в svg.js.

Я пробовал с bbox, но текст недействительно по центру.

Есть идеи получше?

Редактировать:

Вот мой код: 

let dot = draw.group();

let _dot = dot.circle(20).move(pos._x-10, pos._y-10);

let lab = dot.plain(i.toString());

let bA = _dot.bbox();
let bB = lab.bbox();

lab.move(bA.x+(bA.width-bB.width)/2,
    bA.y+(bA.height-bB.height)/2);

Результат такой: https://i.ibb.co/FWbvbF2/dot.png

1 Ответ

0 голосов
/ 07 ноября 2019

Существует метод центра для позиционирования фигуры по ее центру: 

circle.center(20, 20)
text.center(20, 20)

Однако вы также можете использовать свой метод с svg.js. Просто установите нужные атрибуты с помощью attr()

...