Я использую svg. js для создания кругов с текстом внутри и по центру. Я смог это сделать
let draw = SVG('main');
// this is for the text
draw.plain(ele.ticket_id).attr({
x: posX,
y: posY,
fill: '#fff',
'alignment-baseline': 'central',
'text-anchor': 'middle'
})
.font({
size: Number((radius/2) * .5).toFixed(2)
});
// and this creates the circle
circle.animate(500, 'quadIn').attr({
fill: '#f06',
id: element.ticket_id,
class: element.status,
cx: posX,
cy: posY
});
Но я не уверен, как обернуть круг или текст тегом так что должно быть кликабельно. Я не вижу примеров в документации svg. js.