SVG <text>

Tekst SVG - <text>

<text> Elementy są używane do definiowania tekstu.

przykład 1

Napisz tekst:

Kocham SVG!

Oto kod SVG:

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

</svg>

przykład 2

Rotacyjny tekst:

Kocham SVG

Oto kod SVG:

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

</svg>

przykład 3

<text> Element może być <tspan> Elementy razem, są umieszczone w dowolnej liczbie podgrup. Każda <tspan> Element może zawierać różne formaty i pozycje.

Tekst wielostronicowy (używając elementu <tspan>):

Wiele linii: Pierwsza linia. Druga linia.

Oto kod SVG:

<svg height="90" width="200">
  <text x="10" y="20" style="fill:red;">Wiele linii:
    <tspan x="10" y="45">Pierwsza linia.</tspan>
    <tspan x="10" y="70">Druga linia.</tspan>
  </text>
</a>

</svg>

przykład 4

jako tekst linku (zawierający <a> element):

Kocham SVG!

Oto kod 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">Kocham SVG!</text>
  
</a>

</svg>