Как отрисовать многострочный текст svg?

Question

[tvsjke]

Нужно сделать вот такое:



Ну и при наведении еще некоторая логика.

Сделал вот что codepen.io/tvsjke/pen/zNyyYW, и застропорился на некоторых моментах.

1. Как лучше сделать многострочный текст над каждым кругом ? Пробовал решение с tspan, но что-то мне не очень нравится. Может, вообще не через svg ?

2. Как отрисовать дугу для круппы кругов ? К чему привязываться ?

С svg вот только начал знакомиться, сильно не пинайте. Буду благодарен за любые советы.

Answer 1

[Сергей Соколов]

В SVG можно вставить foreignObject – в частности, html, где перенос строк решается просто.

Если вы новичок в SVG, для скорейшего получения результата лучше воспользоваться библиотекой, например, D3js. Вот пример, как вставлять в SVG кусок HTML контента в D3js. И другой подход – пример автоматической генерации SVG-элементов под каждую строку текста.

В вашем случае, как я понял, график не динамический, раз нарисовали и забыли. В таком случае можно поручить отрисовать его в векторе вашему дизайнеру, и вывести статичный SVG код. Вы с ним легко разберётесь и навесите логику при наведении. Например, Adobe Illustrator умеет экспортировать графику в SVG.

Кроме того, раз лейблы статичные, можно просто отрисовать по одному элементу <text> на каждую из строк.

Answer 2

[Олег]

Посмотрите в сторону d3 например. https://d3js.org/

Answer 3

[Андрей]

Дугу можно так нарисовать

<![CDATA[
    .str0 {stroke:#2B2A29;stroke-width:1.19176}
    .fil1 {fill:none}
]]>

<path class="fil1 str0" d="M429 191c-40,71 -117,115 -200,115 -126,0 -228,-98 -228,-220 0,-4 0,-8 0,-12"/>

Или рисуйте круг и кладите его под серую плашку

P.S. Можно воспользоваться векторным редактором