text-anchor

構文

text-anchor: start;
text-anchor: middle;
text-anchor: end;

/* グローバル値 */
text-anchor: inherit;
text-anchor: initial;
text-anchor: revert;
text-anchor: revert-layer;
text-anchor: unset;

値

start

テキスト文字列のインライン方向の先頭位置がアンカーポイントと一致するようにテキストを配置します。この配置はテキストの書き出し方向に関連するものです。例えば、右から左へ、上から下へ書く言語では、テキストはアンカーポイントの左側に配置されます。多くのアジア言語のように、テキストのインライン方向が縦書きの場合、テキストの上端がアンカーポイントと一致します。

middle

テキスト文字列のインラインボックスの中央（中間）がアンカーポイントと揃うようにテキストを配置します。

end

テキスト文字列のインライン方向の末尾位置がアンカーポイントと一致するようにテキストを配置します。この配置はテキストの書き出し方向と相対的なものです。例えば、右から左へ、上から下へ書く言語では、テキストはアンカーポイントの右側に配置されます。多くのアジア言語のように、テキストのインライン方向が縦書きの場合、テキストの下端がアンカーポイントと一致します。

公式定義

形式文法

text-anchor = 
  start   |
  middle  |
  end     

例

3 つの <text> 要素には同じ x 位置が指定されていますが、text-anchor の値はそれぞれ異なります。 3 つのアンカーポイントのすべてについて、 x 軸の位置を示す破線の赤い行が含まれます。

<svg
  viewBox="0 0 200 150"
  height="150"
  width="200"
  xmlns="http://www.w3.org/2000/svg">
  <line
    x1="100"
    y1="0"
    x2="100"
    y2="150"
    stroke="red"
    stroke-dasharray="10,5" />
  <text x="100" y="40">アンカーに配置</text>
  <text x="100" y="80">アンカーに配置</text>
  <text x="100" y="120">アンカーに配置</text>
</svg>

text {
  font-size: 24px;
}

text:nth-of-type(1) {
  text-anchor: start;
}
text:nth-of-type(2) {
  text-anchor: middle;
}
text:nth-of-type(3) {
  text-anchor: end;
}

仕様書

ブラウザーの互換性

関連情報

• dominant-baseline
• SVG の <text> 要素
• SVG の text-anchor 属性