SVG - Inline position element after text - html

Question

I want to position SVG several elements inline inside a single SVG.
I have the following:
<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>
So to position an element before dynamic text is easy, but how can i position after it?

Answer 1

This is how I would do it:
First I'm putting the <text> in a <g> element since it's transformed and I need to get the bounding box:
let bb = theTransformedText.getBBox();
Once I have the position and the size of the text (bb) I'm using the data to set the cx and the cy attributes for the circle.
I've commented out the <use> element since it has no xlink:href attribute.
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>