Как найти ширину текста, когда вес шрифта выделен жирным шрифтом?

Я пытаюсь рисовать границу для текста. Я сделал это для всех динамических размеров шрифта. Но когда вес шрифта полужирный или bolder, ширина текста изменяется для каждого размера шрифта и пересекает границу.Как найти ширину текста, когда вес шрифта выделен жирным шрифтом?

Мой код выглядит следующим образом,

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

источник

2015-12-12 shiva-G-prasadh

Получить длину текста через 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>

источник

2015-12-12 10:57:34

Как найти ширину текста, когда вес шрифта выделен жирным шрифтом?

ответ

Смежные вопросы