How to render multiline svg text?

Question

JavaScript

You need to do this:

Well, when hovering, some more logic.
I did this codepen.io/tvsjke/pen/zNyyYW , and got stuck at some points.
1. What is the best way to make multiline text above each circle? Tried a solution with tspan, but something I don't really like. Maybe not through svg at all?
2. How to draw an arc for a group of circles? What to be attached to?
I just started getting acquainted with svg, don't kick it too hard. I would be grateful for any advice.

Answer 1

In SVG, you can insert foreignObject - in particular, html, where line wrapping is easily solved.
If you're new to SVG, it's best to use a library like D3js for the fastest results . Here is an example of how to embed a piece of HTML content into SVG in D3js. And another approach is an example of automatic generation of SVG elements for each line of text.
In your case, as I understand it, the graph is not dynamic, once drawn and forgotten. In this case, you can instruct your designer to draw it in a vector, and output static SVG code. You can easily deal with it and hang logic on hover. For example, Adobe Illustrator can export graphics to SVG.
Also, since the labels are static, you can simply draw one element <text>per row.

Answer 2

Look towards d3 for example. https://d3js.org/

Answer 3

An arc can be drawn like this

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

Or draw a circle and put it under the gray plate
PS You can use the vector editor