textPath

書き方

<textPath startOffset="?" method = "align | stretch" spacing = "auto | exact" xlink:href = "パス情報参照先URI" >
描画文字列
</textPath>

startOffset="?"

method = "align | stretch"

spacing = "auto | exact"

xlink:href="参照先URI"

パスを定義しているURIを指定する。

使用例

<defs>
<path id="MyPath" d="M50 60 Q 75 40 100 60 T 150 60 T 150 10" />
</defs>

<text style="font-family:Verdana; font-size:12pt; fill:blue">

<textPath xlink:href="#MyPath">
abcdefghijklmnopqrstu
</textPath>

</text>

<path d="M50 60 Q 75 40 100 60 T 150 60 T 150 10" style="fill:none; stroke:red; stroke-width:1" />

次の例は、いわゆる「流し込み」風の使い方である。フォントのサイズとパスの長さの関係によっては、行頭がそろわない。

<defs>
<path id="MyPath" d="M50 30 h120 M50 50 h120 M50 70 h120 M50 90 h120" />
</defs>

<text style="font-family:Verdana; font-size:12pt; fill:blue">

<textPath xlink:href="#MyPath">
abcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQ
</textPath>

</text>

<path d="M50 30 h120 M50 50 h120 M50 70 h120 M50 90 h120" style="fill:none; stroke:red; stroke-width:1" />