元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

【SVG】テキスト

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

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

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

Hello SVG.

  • 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>

Hello SVG.

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>

Hello SVG.Hello SVG.Hello SVG.

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

まとめ

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