SVG <text>

SVG テキスト - <text>

<text> 要素はテキストを定義するために使用されます。

例1

テキストを書きます：

これは SVG コードです：

<svg height="30" width="200">
  <text x="0" y="15" fill="red">I love SVG!</text>
</svg>

実際に試してみる

例2

テキストの回転：

これは SVG コードです：

<svg height="60" width="200">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>

実際に試してみる

例3

<text> 要素は <tspan> 要素は任意のサブグループに配置できます。各 <tspan> 要素はさまざまなフォーマットや位置を含むことができます。

複数行テキスト（<tspan>要素を使用して）：

これは SVG コードです：

<svg height="90" width="200">
  <text x="10" y="20" style="fill:red;">複数行：
    <tspan x="10" y="45">First line.</tspan>
    <tspan x="10" y="70">Second line.</tspan>
  </text>
</svg>

実際に試してみる

例4

リンクテキスト（ <a> 要素）：

これは SVG コードです：

<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="www.codew3c.com/graphics/index.asp" target="_blank">
    <text x="0" y="15" fill="red">I love SVG!</text>
  </a>
</svg>

実際に試してみる