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>