0

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

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

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

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

画像の説明をここに入力

1 件の回答 1

2

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

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

1
  • ありがとうございます。解決しました。 Commented 2022年2月10日 6:32

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。