SVG：text-anchorをmiddleに設定した複数行テキストのtspanからのオフセットを削除するにはどうすればいいですか？

Question

私はいくつかの複数行のテキストを持っており、これを処理するために<text>と<tspan>を使用しています。私は各ラインを中央に配置したいので、メイン<text>タグtext-anchor="middle"で使用しています。しかし、dx=0であっても、ブロック全体がまだ全長テキストだけシフトされています。

マルチラインの<tspan>のSVGテキストはどうすればできますか？

<text text-anchor="middle" font-size="12px"> 
    This would normally be centered 
    <tspan> 
     this should be too. 
    </tspan> 
</text> 

Answer 1

テキストと同じxをtspanに指定できます。

<svg> 
 
<text x="100" y="30" text-anchor="middle" font-size="12px"> 
 
    This would normally be centered 
 
    <tspan x="100" dy="30"> 
 
     this should be too. 
 
    </tspan> 
 
</text> 
 
</svg>

またはtspanのためのx = "0" 変革し、設定を使用して...

<svg> 
 
    <text transform="translate(100, 30)" text-anchor="middle" font-size="12px"> 
 
     This would normally be centered 
 
     <tspan x="0" dy="30"> 
 
      this should be too. 
 
     </tspan> 
 
    </text> 
 
    </svg>