text-anchorプロパティは、指定された位置に対する文字列の相対的な位置を指定する際に使われます。
text-anchorプロパティによって、text要素のx属性およびy属性によって指定された位置が文字列のどの部分の位置であるかが指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、text-anchorプロパティの値を指定する場合はtext-anchor属性を利用します。
text-anchor属性の値は、"start"、"middle"、"end"、もしくは"inherit"です。
"start"の場合は、文字列の開始点をx属性およびy属性によって指定された位置にあわせます。左から右へ書く場合には左揃えとなります。
(仕様には縦書き(上から下)の場合は上揃えになると書いてありますが、そもそも縦書きはSVG Tiny 1.2には存在しないような・・・)
"middle"の場合は、文字列の中央(描いて中央になる位置であって、中央の文字ではありません)をx属性およびy属性によって指定された位置にあわせます。
"end"の場合は、文字列の終了点をx属性およびy属性によって指定された位置にあわせます。左から右へ書く場合には右揃えとなります。
例えば、
<text x="100" y="100" text-anchor="start">テキスト</text>
のように書けば、文字列の左端のx座標が100になります。
<text x="100" y="100" text-anchor="end">テキスト</text>
のように書けば、文字列の右端のx座標が100になります。
text-anchor属性がない場合は"start"として扱われます。
text-anchorプロパティによって、text要素のx属性およびy属性によって指定された位置が文字列のどの部分の位置であるかが指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、text-anchorプロパティの値を指定する場合はtext-anchor属性を利用します。
text-anchor属性の値は、"start"、"middle"、"end"、もしくは"inherit"です。
"start"の場合は、文字列の開始点をx属性およびy属性によって指定された位置にあわせます。左から右へ書く場合には左揃えとなります。
(仕様には縦書き(上から下)の場合は上揃えになると書いてありますが、そもそも縦書きはSVG Tiny 1.2には存在しないような・・・)
"middle"の場合は、文字列の中央(描いて中央になる位置であって、中央の文字ではありません)をx属性およびy属性によって指定された位置にあわせます。
"end"の場合は、文字列の終了点をx属性およびy属性によって指定された位置にあわせます。左から右へ書く場合には右揃えとなります。
例えば、
<text x="100" y="100" text-anchor="start">テキスト</text>
のように書けば、文字列の左端のx座標が100になります。
<text x="100" y="100" text-anchor="end">テキスト</text>
のように書けば、文字列の右端のx座標が100になります。
text-anchor属性がない場合は"start"として扱われます。