48

複数行のテキストを SVG で出力する必要があります。そのために、次のスキームを使用しています。

<text>
  <tspan> First line </tspan>
  <tspan> Second line </tspan>
</text>

テキストの 1 行目と 2 行目の文字数は異なる場合があり、動的に変更される場合があります。2 行目を最初の行の下に表示し、両方のテキストを中央に配置します。

dy="15"2 番目の行に を追加することで、2行目を最初の行の下に表示できます<tspan>。

<tspan>追加することで、各個人のテキストを揃えることができますtext-anchor="middle"。

しかし、それらの相対的な中心位置合わせを行うにはどうすればよい<tspan>でしょうか?

x="0"それぞれに使用しようとしましたが、それぞれ幅が異なり、短い行のレンダリングされたテキストが左にシフトするため<tspan>、明らかに機能しません。<tspan>

<tspan>CSS や SVG のみを使用して、幅の異なる2 の中心を揃える方法はありますか。

4

3 に答える 3

40

デモ

ここに画像の説明を入力

text-anchor='start'右揃えの場合。

text-anchor='middle'中央揃え用。

text-anchor='end'左揃え用。

デモからのコード:

<svg width="100%" height="230" viewBox="0 0 120 230"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

    <!-- Materialisation of anchors -->
    <path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" />


    <!-- Anchors in action -->
    <text text-anchor="start"
          x="60" y="40">This text will align right</text>

    <text text-anchor="middle"
          x="60" y="75">This text will align middle</text>

    <text text-anchor="end"
          x="60" y="110">This text will align left</text>

    <!-- Materialisation of anchors -->
    <circle cx="60" cy="40" r="3" fill="red" />
    <circle cx="60" cy="75" r="3" fill="red" />
    <circle cx="60" cy="110" r="3" fill="red" />

<style><![CDATA[
text{
    font: bold 15px Verdana, Helvetica, Arial, sans-serif;
}
]]></style>
</svg>

text-anchor プロパティの詳細については、こちらをご覧ください

于 2014-04-24T14:49:27.313 に答える