<textPath startOffset="?" method = "align | stretch" spacing = "auto | exact" xlink:href = "パス情報参照先URI" > 描画文字列 </textPath>
パスを定義している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" /> |