web-dev-qa-db-ja.com

テキストの行をSVGの中央に揃える

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

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

テキストの1行目と2行目には異なる文字数を含めることができ、それらは動的に変更できます。 2行目を最初の行の下に表示し、両方のテキストを中央に配置する必要があります。

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

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

しかし、これらの<tspan>の相対的な中心位置合わせを行う方法は？

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

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

csstextsvgalignmenttspan
44
BartoNaz

text-anchor="middle"をeachtspanに追加すると、それらを中央に配置します（スペースbetweentspansも同様です。それ以外の場合、余分なスペースは最初の行の一部と見なされ、完全に中央揃えされません）。

例えば：

<svg>
    <text y="50" transform="translate(100)">
       <tspan x="0" text-anchor="middle">000012340000</tspan><tspan x="0" text-anchor="middle" dy="15">1234</tspan>
   </text>
</svg>

参照：JSFiddle

52
helderdarocha

[〜＃〜] demo [〜＃〜]

enter image description here

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>

テキストアンカープロパティの詳細ここ

34
Imran Bughio

テキストを水平方向に中央揃えするキーポイント：
1。 x="50%"
2。 text-anchor='middle'

あなたの場合、次のように書くことができます：

<svg style="width:100%">
  <text y="50">
    <tspan x="50%" text-anchor="middle"> First line </tspan>
    <tspan x="50%" dy="15" text-anchor="middle"> Second line </tspan>
  </text>
</svg>
7
Eric