Javascript 字体粗体时如何查找文本宽度？

我正在尝试为文本绘制边框。我已经做了所有的动态字体大小。但当字体大小为“粗体”或“粗体”时，文本的宽度会因每个字体大小而改变，并与边框重叠

我的代码如下：

<svg id="container_svg" style="width: 1000px; height: 630px;">
   <rect id="container_svg_SvgRect" x="1" y="1" width="996" height="626" fill="transparent" opacity="0.3" stroke-width="2" stroke="black"></rect>
   <rect id="container_svg_ChartArea" x="83" y="96" width="893" height="418" fill="transparent" stroke-width="0.5" opacity="0.3" stroke="Gray"></rect>
   <rect id="container_svg_ChartTitleBorder" x="220.5" y="18.349999999999994" rx="5" ry="5" width="581" height="39.6" fill="lightblue" stroke-width="0.8" stroke="red" opacity="0.8"></rect>
   <g id="container_svg_ChartTitle">
   <text id="container_svg_ChartTitle" x="230.5" y="48.05" fill="#E27F2D" font-size="33px" font-family="Arial" font-style="italic" font-weight="bold" opacity="1" letter-spacing="-0.7px" text-anchor="start">title is my title border which is overflow </text>
</svg>

标题是我的标题边框，它是溢出的

在这里，我试图调整字体的重量。但当字体大小增加时，文本在矩形上溢出

---

下面是一个：

通过SVG DOM获取文本的长度并调整rect宽度

document.getElementById（“container_svg_ChartTitleOrder”）.width.baseVal.value=document.getElementById（“svg_ChartTitle”）.getComputedTextLength（）+20

标题是我的标题边框，它是溢出的