text要素をパスに沿って描画

SVGでtext要素をパスに沿って描画するには、textPathを使用します。

  • ※ テキストがパスに収まらない場合は、収まらない部分は表示されません。

構文

<textPath>テキスト</textPath>

属性

属性名 初期値 説明
xlink:href 基準となるパスの要素のID名。
method align 文字を並べる際の変形の仕方。
align ... 変形しない
stretch ... 文字自体を変形
startOffset 0 パスの開始から文字を並べるときの開始位置。
spacing exact 文字を並べる際の変形の仕方。
auto ... ※ 不明
exact ... ※ 不明

サンプルコードとデモ

あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ

XML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" width="200" height="200">
	<defs>
		<circle cx="100" cy="100" r="70" id="guide"></circle>
	</defs>
	<text>
		<textPath xlink:href="#guide">
			あいうえお
			<tspan fill="#ed1e79" font-size="20">かきくけこ</tspan>
			さしすせそ
			たちつてと
			なにぬねの
			はひふへほ
		</textPath>
	</text>
</svg>
あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ

XML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" width="200" height="200">
	<defs>
		<path d="M 0,14 100,14 M 0,42 100,42 M 0,70 100,70" id="guide">
	</defs>
	<text>
		<textPath xlink:href="#guide">
			あいうえお
			かきくけこ
			さしすせそ
			たちつてと
			なにぬねの
			はひふへほ
		</textPath>
	</text>
</svg>

SVG逆引きリファレンス一覧へ戻る