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>

​