text-anchor

例

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <!-- アンカーの素材 -->
  <path
    d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110"
    stroke="grey" />

  <!-- アンカーの実例 -->
  <text text-anchor="start" x="60" y="40">A</text>
  <text text-anchor="middle" x="60" y="75">A</text>
  <text text-anchor="end" x="60" y="110">A</text>

  <!-- アンカーの素材 -->
  <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 36px Verdana, Helvetica, Arial, sans-serif;
      }
      ]]>
  </style>
</svg>

使用方法のメモ

start

レンダリングされる文字は、テキスト文字列の先頭が現在のテキスト位置の初期位置にくるように配置されます。 direction プロパティ値が ltr （ほとんどのヨーロッパ言語で一般的）である要素の場合、テキストの左端がテキストの初期位置に描画されます。 direction プロパティ値が rtl （アラビア語やヘブライ語で一般的）である要素の場合、テキストの右端がテキストの初期位置に描画されます。主テキスト方向が縦書き（アジアのテキストで多い）である要素の場合、テキストの上端がテキストの初期位置に描画されます。

middle

レンダリングされる文字は、テキスト文字列の中央が現在のテキスト位置にくるように配置されます。（パス上のテキストの場合、概念的には、まずテキスト文字列が直線上にレイアウトされます。テキスト文字列の開始位置と末尾位置の中心点が決定されます。次に、テキスト文字列は、この中心点が現在のテキスト位置に置かれた状態でパス上に割り当てられます。）

end

レンダリングされる文字は、レンダリングされたテキストの末尾（text-anchor プロパティを適用する前のテキストの最終的な現在位置）が、最初の現在位置に来るように移動されます。 direction プロパティ値が ltr （ほとんどのヨーロッパ言語で一般的）である要素の場合、テキストの右端がテキストの初期位置に描画されます。 direction プロパティの値が rtl （アラビア語やヘブライ語に多い）である要素の場合、テキストの左端がテキストの初期位置に表示されます。主テキスト方向が縦書き（アジアのテキストに多い）である要素の場合、テキストの下端が初期テキスト位置に表示されます。

仕様書

ブラウザーの互換性

関連情報

• SVG の <text> 要素
• CSS の text-anchor プロパティ