【CSS Modules】text-anchorプロパティの使い方
text-anchorプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
text-anchorプロパティは、SVG（Scalable Vector Graphics）要素におけるテキストの基準点（アンカーポイント）の位置合わせ方法を保持するプロパティです。
主にSVGドキュメント内で使用され、<text>要素や<tspan>要素といったテキスト関連要素に適用されます。このプロパティは、テキストの描画開始位置、中央、または終了位置のいずれを、そのテキストが配置される点の基準とするかを指定します。これにより、SVGグラフィック内でテキストを正確に整列させることが可能になります。
設定できる主な値は以下の通りです。startを指定した場合、テキストの始端が指定された位置に整列されます。これは、左から右へ書く言語（例えば日本語や英語）ではテキストの左端、右から左へ書く言語では右端が基準となります。middleを指定した場合、テキストの中央が指定された位置に整列されます。endを指定した場合、テキストの終端が指定された位置に整列されます。これは、左から右へ書く言語ではテキストの右端、右から左へ書く言語では左端が基準となります。
このプロパティは、通常のHTML要素でテキストの水平方向の整列に使用されるtext-alignプロパティとは異なり、SVGの図形やパスの中にテキストを埋め込む際の、より精密な配置制御を目的としています。システムエンジニアとしてSVGを用いてデータの可視化やグラフィック表現を行う際に、テキストを意図した位置に正確に配置するために不可欠なプロパティです。
公式リファレンス: text-anchor
構文(syntax)
1text-anchor: middle;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません