Podstawowy kod
Za pomocą technik SVG na obrazach możemy umieszczać tekst. Przykładowo:
<svg width="400" height="50" xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="20" y="25" >Jakiś tekst w ramach SVG</text> </svg>
Kod powoduje umieszczenie początku tekstu w odległości 20 pikseli od lewego marginesu (x="20") i dolnego brzegu (!) tekstu 25 pikseli od górnego merginesu (y="25").
Uwaga: tekst w SVG nie jest automatycznie zawijany - jeśli chcesz utworzyć kilka wierszy tekstu, musisz wpisać i pozycjonować każdy wiersz z osobna.
Atrybuty tekstu
Kod font-family="nazwa" powoduje wybranie konkretnej czcionki lub rodziny.
Kod font-size="wartość" powoduje wskazanie wielkości czcionki (domyślnie w pikselach, ale można podać jawnie w punktach).
Kod fill="wartość koloru" powoduje wybranie koloru tekstu.
Kod stroke-width="grubość obramowania" powoduje wybranie grubości obramowania w pikselach (obramowanie w czerwonym kolorze).
Kod stroke="kolor" powoduje wybranie koloru obramowania.
Kod letter-spacing="wartość" powoduje wstawienie odstępów między literami (domyślna wartość to 1).
Możemy stosować polecenia znane ze specyfikacji styów, np. font-style="italic" dla kursywy czy font-weight="bold" dla pogrubienia.
Rotacja tekstu
Tekst może być obracany za pomocą polecenia obracania poznanego już w rozdziale o transformacjach.
Polecenie transform="rotate(20 30 30)" obraca tekst o 20 stopni wokół punktu 30,30.
Polecenie transform="rotate(-20 30 30)" obraca tekst o -20 stopni wokół punktu 30,30.
Link internetowy
Tekst można objąć zewnętrznym poleceniem linkowania, podobnym w swojej istocie do polecenia w języku HTML:
<a xlink:href="http://www.helion.pl"> <text fill="#000000" stroke="#000000" stroke-width="0" x="140" y="50" font-size="24" font-family="serif" font-weight="bold" > Wydawnictwo Helion </text> </a>
Możliwe jest też użycie parametru target kierującego do osobnego okna.
Gdy przesuniesz kursor myszy nad napis, będziesz mógł kliknąć i przejść do zakodowanego pod napisem adresu internetowego.
Pozycjonowanie fragmentów tekstu
Polecenie o przykładowej postaci:
<text x="20" y="30">
<tspan>Pierwszy wiersz</tspan>
<tspan>Drugi wiersz</tspan>
</text>
tworzy uklad kilku fragmentów tekstu pozycjonowanych w naturalny sposób jeden za drugim.
Gdy zastosujemy dodatkowe parametry dx (czyli delta x) i dy (czyli delta y), uzyskamy dodatkowe odstępy - poziome i pionowe, o dodatniej lub ujemnej wartości, np.:
<text x="20" y="30">
<tspan>Pierwszy wiersz</tspan>
<tspan dx="-20" dy="30">Drugi wiersz</tspan>
</text>
Możemy też ustalić absolutną pozycję x każdego z fragmentów, aby rozpoczynały się w tej samej odległości od lewego marginesu:
<text x="20" y="30">
<tspan x="10">Pierwszy wiersz</tspan>
<tspan x="10" dy="30">Drugi wiersz</tspan>
<tspan x="10" dy="30">Trzeci wiersz</tspan>
</text>
Tekst na ścieżce
Możliwe jest zdefiniowanie ścieżki, umieszczenie jej w bloku defs, a następnie podanie tekstu i odwołanie się do ścieżki, przykładowo:
<defs>
<path id="sciezka01" d="M50,20 a1,1 0 0,0 150,0" />
</defs>
<text x="10" y="80" font-size="25" style="fill:blue;">
<textPath xlink:href="#sciezka01">Jakiś tekst na ścieżce</textPath>
</text>
