Strona główna » Poradniki » Grafika SVG » Umieszczenie tekstu na ścieżce
TEST

Umieszczenie tekstu na ścieżce

Wstęp

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.

Implementacja

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.

Test ścieżki

Warto zwrócić uwagę, że ścieżka nie musi być wcale widoczna. Poniżej znajduje się dokładny opis kodu odpowidającego za kod.

  1. <svg viewBox="0 0 300 100" width="300" height="100"
  2.   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  3.   <defs>
  4.     <path id="textPath" d="M25,50 L250,75" />
  5.   </defs>
  6.   <text style="font-size:30px">
  7.     <textPath xlink:href="#textPath">
  8.       Test ścieżki
  9.     </textPath>
  10.   </text>
  11. </svg>

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.

Kwadratowa ścieżka

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.

Tekst, który został umieszczony na kwadracie

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:

  1.   <defs>
  2.     <path id="textPath2"
  3.       d="M30,30 L170,30 L170,170 L30,170 L30,30" />
  4.   </defs>

Umieszczanie tekstu na kole

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.

Tekst umieszczony wewnątrz koła
  1.   <defs>
  2.     <path id="textPath3"
  3.     d="M 100 100 m -80, 0 a 80,80 0 1,0 160,0 a 80,80 0 1,0 -160,0" />
  4.   </defs>

Zmieniając tylko 1,0 na 1,1 można uzyskać napis na zewnątrz koła

Tekst umieszczony na zewnątrz koła
  1.   <defs>
  2.     <path id="textPath4"
  3.     d="M 100 100 m -70, 0 a 70,70 0 1,1 140,0 a 70,70 0 1,1 -140,0" />
  4.   </defs>

Zadania

Zadanie 1

Napisz kod, który wyświetli grafikę przedstawioną poniżej.

Nad kreską!Pod kreską!

Zadanie 2

Napisz kod, który wyświetli grafikę przedstawioną poniżej.

DOBREJADŁO· Gwarancja satysfakcji · Gwarancja satysfakcji · Gwarancja satysfakcji · Gwarancja satysfakcji · Gwarancja satysfakcji · Gwarancja satysfakcji