SVG/Tekst

Aby dodać tekst do wektora SVG, możesz użyć elementu <text>. Oto przykład:

<svg width="400" height="400">
   <text x="50" y="50">Witaj, świecie!</text>
</svg>

W tym przykładzie tworzymy plik SVG o szerokości i wysokości 400. Następnie dodajemy element <text> z tekstem „Hello World!” na pozycji (50, 50) przy użyciu atrybutów x i y.

Możesz stylizować tekst za pomocą różnych atrybutów, takich jak rozmiar czcionki, rodzina czcionek, grubość czcionki, zakotwiczenie tekstu i wypełnienie. Oto przykład:

<svg width="400" height="400">
   <text x="50" y="50" font-size="24px" font-family="Arial" font-weight="bold" text-anchor="start" fill="red">Witaj, świecie!< /tekst>
</svg>

W tym przykładzie dodaliśmy dodatkowe atrybuty, aby stylizować tekst. Ustawiliśmy rozmiar czcionki na 24 piksele, rodzinę czcionek na Arial, grubość czcionki na pogrubioną, zakotwiczenie tekstu na „start” (co oznacza, że tekst jest wyrównany do lewej), a kolor wypełnienia na czerwony.

Istnieje wiele innych atrybutów, których można użyć do stylizowania tekstu w SVG. Pełną listę atrybutów tekstu można znaleźć w specyfikacji SVG.