javascript - 当字体粗细为粗体时如何找到文本的宽度？

Question

我正在尝试为文本绘制边框。我已经为所有动态字体大小完成了。但是，当字体粗细为粗体 或粗体 时，文本的宽度会根据每种字体大小而变化，并且会与边框重叠。

我的代码如下，

<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>

这里我尝试调整字体粗细。但是当字体大小增加时，文本会在矩形上溢出。

这是一个Fiddle :

Answer 1

通过SVG DOM获取文本的长度并调整矩形宽度。

document.getElementById("container_svg_ChartTitleBorder").width.baseVal.value = document.getElementById("svg_ChartTitle").getComputedTextLength() + 20

<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="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>