

svgで「温度」を表示するようなテキストボックスを配置したいのですが、以下の条件にあるテキストボックスを書くことができず困っております。

  * 単位部分が右側に固定
  * 数値は単位の左側から右寄せで表示(text-align:rightのような)

どのように記載すればよいかご教授いただきたいです。

[code]

    <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" >
          <tspan id="1">19.5</tspan>
          <tspan id="2">℃</tspan>
        </text>
    </g>
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/NrHiX.png)](https://i.stack.imgur.com/NrHiX.png)


CC BY-SA 4.0
2022-02-10T05:39:28.387
86243
2022-02-10T05:58:37.630
12388
question
svg
svgでtextタグ内の一部tspanタグを右寄せ文字にしたい


2つのテキストの区切りの地点を両方の`tspan`の`x=`と`y=`に設定して、数値部分に `text-anchor="end"`、単位部分に
`text-anchor="start"` を付けるのはいかがでしょうか。

[code]

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

[code]

    <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" >
          <tspan id="1" x="50" y="16.875" text-anchor="end">19.5</tspan>
          <tspan id="2" x="50" y="16.875" text-anchor="start">℃</tspan>
        </text>
    </g>
[/code]


CC BY-SA 4.0
2022-02-10T05:58:37.630
86244
2022-02-10T05:58:37.630
3475
86243
answer