【SVG】テキスト

SVGは、テキストを描画することもできます。図形とは違うテキスト特有の属性があり、それを使って装飾します。また、パスに沿ってテキストを配置することもできます。

text:テキストの記述と属性

<text x="10" y="52" font-size="60" stroke-width="2" stroke="blue" fill="skyblue">
Hello SVG.
</text>

• x:テキストの左端のx座標
• y:テキストのベースラインのy座標

textタグで文字を挟む。

テキストの装飾

• font-size:フォントサイズ
• font-family:フォントの名前
• font-weight:フォントの太さ
• font-style:フォントのスタイル
• text-decoration:テキストの装飾

tspan:テキストの一部分に対するスタイルの適用

textタグの子要素として、tspanタグを書く。tspanタグにスタイルを適用させる。

<g fill="blue" font-size="60" font-family="serif">
  <text x="10" y="52">
  Hello S<tspan fill="deeppink">V</tspan>G.
  </text>
</g>

textPath:パスに沿ってテキストを配置する

指定されたパスに沿ってテキストが配置される。

<defs>
  <path id="path1" d="M30,55 a35,23 0 1,1 40,0"/>
</defs>

<text font-size="12" font-family="serif" fill="cadetblue">
  <textPath href="#path1">Yoda: Do or do not. There is no try.</textPath>
</text>

• textPath:href属性にpathをidで指定
• defs:要素を定義しておく場所。描画しないが、必要な要素をまとめて記述しておく。

まとめ

• text:テキストの記述と属性
  • テキストの装飾
• tspan:テキストの一部分に対するスタイルの適用
• textPath:パスに沿ってテキストを配置する