Dotychczas wstawiany tekst na płótno był bardzo prosty. Był to pojedynczy element zawierający sformatowany tekst. Do obrócenia tekstu wystarczyło użyć atrybutu transform. W grafice SVG istnieje możliwość zdefiniowania ścieżki na której zostanie umieszczone tekst. W ten sposób jest możliwe tworzenie bardziej skomplikowanych obiektów tekstowych.
Do umieszczenie tekstu na ścieżce potrzeba na początek zdefiniować ścieżkę i nadać jej identyfikator. Ścieżka może być całkowicie dowolna, ale należy pamiętać, że nadmierna ilość ostrych zakończeń czy krótkie odcinki spowodują, że po umieszczeniu na nich tekstu tekst będzie nieczytelny. Ścieżkę należy zdefiniować jako obiekt path w sekcji definicji defs.
Oto przykładowa ścieżka na której zostanie umieszczony tekst. Kolejny etap polega na zadeklarowaniu elementu text, a w środku elementu textPath. Wewnątrz takiego obiektu deklaruje się tekst do umieszczenia na ścieżce określonej przez atrybut xlink:href, którego wartość powinna być identyfikatorem wcześniej zdefiniowanej ścieżki. Poniżej znajduje się gotowy przykład razem z wyjaśnieniami kodu.
Warto zwrócić uwagę, że ścieżka nie musi być wcale widoczna. Poniżej znajduje się dokładny opis kodu odpowidającego za kod.
Definicja kodu SVG (2. - 3.) oraz przestrzeni nazw, których wymaga obiekt. W sekcji (4. - 6.) definicji (5.) zadeklarowana zostaje ścieżka textPath, która będzie użyta do wykrzywienia tekstu. (7.) W obiekcie text zostaje umieszczony (8.) obiekt textPath. Określa on, że tekst ma zostać umieszczony na textPath, a umieszczonym tekstem jest (9.) "Test ścieżki". Dalej pozostaje zamknąć po kolei wszystkie otwarte obiekty, aby powstał prawidłowy plik XML.
Jak wcześniej zostało wspomniane tekst można umieszczać na ścieżce o dowolnym kształcie. Poniżej znajduje się inny przykład ścieżki na której został umieszczony kod. W zależności od wyświetlania grafiki niektóre ostatnie litery wyrazów mogą zostać na następny odcinek ścieżki. Nie jest to efekt zamierzony, ale zgodny z założeniami umieszczania tekstu na ścieżce. Należy zawsze pamiętać, że ścieżka musi być odpowiednio dobrana.
W tym przypadku zmiana w kodzie dotyczy tego jak wygląda ścieżka. Została ona przedłużona o trzy dodatkowa odcinki dzięki czemu tekst został napisany na obramowaniu kwadratu. Poniżej znajduje się kod nowej ścieżki:
W trakcie umieszczania tekstu na kole może pojawić się pytanie jak sprawić, żeby tekst był umieszczony wewnątrz czy na zewnątrz okręgu. W przypadku rysowania okręgu przy pomoc dwóch krzywych należy odpowiednio sterować wartościami sweepflag argumentu rysowania a.
Zmieniając tylko 1,0 na 1,1 można uzyskać napis na zewnątrz koła
Napisz kod, który wyświetli grafikę przedstawioną poniżej.
Napisz kod, który wyświetli grafikę przedstawioną poniżej.
