SVGチュートリアル

SVG要素

SVG<textPath>要素

SVG <textpath>要素は、円などのパスに沿ってテキストを配置し、効果がとてもクールに見えます。異なるブラウザはテキストをパスに沿って表示する方法が少し異なるため、サポートされているブラウザでテキストの外観を確認してください。

オンラインサンプル

例

<svg　　width="500"　height="250">　　　　
<defs>　　　　
<path id="myTextPath" d="M75,20　a1,1　0　0,0　100,0"　/>　　　　
</defs>　　　　
<text　x="20"　y="80"　style="stroke:　#000000;">　　　　
<textPath xlink:href="#myTextPath">oldtoolbag.com　基础教程.../textPath>　　　　
</text>　　　　
</svg>

テストを見て‹/›

実行後の画像効果：

<path>要素（<defs>要素内）がid属性を持っていることに注意してください。このid属性の値は、xlink:href属性から参照される<textpath>です。

パスの長さがテキストの長さよりも短い場合、パスの拡張範囲内のテキスト部分のみを描画します。

もっと高度なパスを使用することもできます。これはより複雑なテキストパスの例です：

例

<svg　width="500"　height="200">
　　　　<defs>
　　　　　　　　<path　id="myTextPath2"
　　　　　　　　　　　　　　d="M75,20　l100,0　l100,30　q0,100　150,100"/>
　　　　</defs>
　　　　<text　x="20"　y="40"　style="stroke:　#000000;">
　　　　　　　　<textPath　xlink:href="#myTextPath2">
　　　　　　　　　　　　oldtoolbag.com　基本チュートリアル....
　　　　　　　　</textPath>
　　　　</text>
</svg>

テストを見て‹/›

この例では、水平線、斜線、曲線からなるテキストパスが定義されています。

実行後の画像効果：

SVG<a>要素 SVG<tref>要素