SVG - встроенный элемент позиции после текста

Question

Я хочу расположить несколько элементов SVG внутри одного SVG.

У меня есть следующее:

<svg>
    <g>
        <use width="28" height="28"class="cls-11"></use>
        <text id="policyRectText" transform="translate(50,20)" class="cls-54">Runs on a small number of endpoints</text>
        <circle r="15" stroke-width="4" transform="translate(250,15)" class="cls-8"></circle>
    </g>
</svg>  

То есть позиционировать элемент перед динамическим текстом легко, но как я могу расположить его после него?

Answer 1

Вот как бы я это сделал:

Сначала я помещаю <text> в элемент <g>, поскольку он преобразован, и мне нужно получить ограничивающий прямоугольник:

let bb = theTransformedText.getBBox();

Как только у меня есть позиция и размер текста (bb), я использую данные, чтобы установить атрибуты cx и cy для круга.

Я закомментировал элемент <use>, поскольку он не имеет атрибута xlink:href.

let bb = theTransformedText.getBBox();
let r = parseFloat(theCircle.getAttribute("r"));// the circle's radius.
let sw = parseFloat(theCircle.getAttribute("stroke-width"));// the stroke width
theCircle.setAttributeNS(null, "cx", bb.x + bb.width + r + sw/2);
// assuming that the font size is 16 you need to offset the circle half font size
theCircle.setAttributeNS(null, "cy", bb.y + 8);

<svg viewBox="0 -50 400 100">
    <g>
        <!--<use width="28" height="28"class="cls-11"></use>-->
      <g id="theTransformedText">
        <text id="policyRectText" transform="translate(50,20)" class="cls-54">Runs on a small number of endpoints</text>
      </g>
        <circle id="theCircle" r="15" stroke-width="4" class="cls-8"></circle>
    </g>
</svg>