SVG <text>

SVG tekst - <text>

<text> elementen worden gebruikt om tekst te definiëren.

voorbeeld 1

Schrijf een stuk tekst:

Dit is de SVG-code:

<svg hoogte="30" breedte="200">
  <text x="0" y="15" fill="rood">Ik hou van SVG!</text>
</svg>

Try It Yourself

voorbeeld 2

Gedraaid tekst:

Dit is de SVG-code:

<svg hoogte="60" breedte="200">
  <text x="0" y="15" fill="rood" transform="draaien(30 20,40)">Ik hou van SVG</text>
</svg>

Try It Yourself

voorbeeld 3

<text> element kan worden gecombineerd met <tspan> elementen samen, worden georganiseerd in een willekeurig aantal subgroepen. Elke <tspan> elementen kunnen verschillende formaten en posities bevatten.

Meerdere regels tekst (gebruik het <tspan>-element):

Dit is de SVG-code:

<svg hoogte="90" breedte="200">
  <text x="10" y="20" stijl="rood vullen;"> Verschillende regels:
    <tspan x="10" y="45"> Eerste regel.</tspan>
    <tspan x="10" y="70"> Tweede regel.</tspan>
  </text>
</svg>

Try It Yourself

voorbeeld 4

als koppelingstekst (met <a> elementen):

Dit is de SVG-code:

<svg hoogte="30" breedte="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="rood">Ik hou van SVG!</text>
  </a>
</svg>

Try It Yourself