I want some tspan tags in the text tag to be right-aligned in svg

"I would like to place a text box that displays ""temperature"" in svg, but I am having trouble writing a text box that meets the following conditions."

Units fixed to the right
Number is displayed from left to right of unit (like text-align:right)

Please tell me how to write it down.

<svg id="111" x="000" y="200" width="100" height="19">
<g>
    <rect width="100%" height="100%" fill="#ff0000"/>
    <text font-weight="bold" font-size="18px"x="5"y="16.875" fill="#000000">
      <tsspan id="1">19.5</tsspan>
      <tsspan id="2">°C</tsspan>
    </text>
</g>

svg

2022-09-30 11:16

1 Answers

How about setting the separation point between the two text to x= and y= in both tspan and text-anchor="end" in numeric parts and text-anchor="start" in units?

setInterval()=>{
  document.getElementById('1') .textContent=Math.floor(Math.random()*1000)/10;
 }, 300);

<svg id="111" x="000" y="200" width="100" height="19">
<g>
    <rect width="100%" height="100%" fill="#ff0000"/>
    <text font-weight="bold" font-size="18px" fill="#000000">
      <tsspan id="1" x="50" y="16.875" text-anchor="end">19.5</tsspan>
      <tsspan id="2" x="50" y="16.875" text-anchor="start">°C</tsspan>
    </text>
</g>

2022-09-30 11:16

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656