◎SVG要素（タグ）の記述について（その３）

テキスト（textタグ）の記述についてまとめて見ました。
内容は下記の通りとなります。

１、テキスト（textタグ）の属性について
　　例：<text x=”0″ y=”20″ fill=”Brown”>TakayaCommunications</text>
　　　a.「x」は、文字の表示するX座標を定義しています。
　　　b.「y」は、文字の表示するY座標を定義しています。
　　　c.「transform」は、座標軸の変形を行います。
　　　　・matrix関数（変換行列による変形）
　　　　・translate関数（移動[tx,ty]）
　　　　・scale関数（拡大・縮小[sx,sy]マイナスの値も設定可能。その場合は図形が反転する。）
　　　　・rotate関数（回転[angle,cx,cy]なお角度は0〜360を指定）
　　　　・skewX関数（横方向の傾斜[angle]）
　　　　・skewY関数（縦方向の傾斜[angle]）
　　　　注）deg等の単位は不要

２、ディフ（defsタグ）について
　　defsタグは各種定義情報（テンプレートとなる図形やグラデーション等）を格納します。
　　情報の格納ですので、defsタグの中の定義で表示したりする事は、ありません。

３、テキストパス（textPathタグ）の属性について
予め定義しておいた線の上に文字列を配置することが出来きます。文字描画の基底線に接するように配置されます。
　　<textPath xmlns:xlink=”http://www.w3.org/1999/xlink” xlink:href=”#path1″>TakayaCommunications</textPath>
　　a.「startOffset」は、文字配置の開始位置を指定します。
　　b.「method」は、パスに沿って文字列を並べるだけでなく、文字そのものを変形するかどうかを指定します。
　　　（align：位置のみ）と（stretch：パスに沿って変形する）の指定があります。
　　c.「spacing」は、字の幅を用いるか文字間隔を調整するかを指定します。
　　　（exact：文字の幅でそのまま並べる）と（auto：文字間を調節する）の指定があります。

↓以下がテストのソースサンプルです。

▼HTML

<svg>
    <!--　テキスト表示 -->
	<text x="0" y="20" fill="Brown">TakayaCommunications</text>
    <!--　テキスト表示 transform-->
	<text x="100" y="150" fill="red" transform="rotate(30 100,150)">TakayaCommunications</text>
    <!--　テキスト表示 defs/textPath -->
	<defs><path id="path1" d="M300,50 a50,50 0 1,0 150,150" /></defs>
	<text x="175" y="200" fill="purple">
				<textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path1">TakayaCommunications</textPath>
	</text>
</svg>

デモページは、こちら