W SVG za umieszczenie (ułożenie) tekstu wzdłuż ścieżki odpowiada element <textPath>. Jest on umieszczany wewnątrz elementu <text> i zawiera treść tekstową, która ma zostać wyrenderowana po krzywej.
Kluczowe jest to, że <textPath> musi wskazać, po jakiej ścieżce ma biec tekst. Najczęściej robi to przez atrybut href (lub historycznie xlink:href), który odwołuje się do identyfikatora ścieżki, np. #curvePath.
- <textPath href="#curvePath"> – to ten fragment wiąże tekst z krzywą i powoduje, że litery układają się po ścieżce.
- <path id="curvePath" .../> – ten element tylko definiuje geometrię krzywej (kształt w atrybucie d) i może być użyty jako ścieżka odniesienia, ale sam nie umieszcza tekstu.
- <text x="20" y="100"> – to kontener tekstu i ewentualne pozycjonowanie bazowe; bez <textPath> tekst byłby po prostu pozycjonowany w układzie współrzędnych SVG.
- Tekst na ścieżce – to wyłącznie treść (zawartość węzła tekstowego), a nie mechanizm ani znacznik odpowiadający za prowadzenie tekstu po krzywej.
W praktyce warto zapamiętać zasadę: <path> tworzy ścieżkę, <text> przechowuje tekst, a <textPath> łączy tekst ze ścieżką. Na egzaminie często sprawdza się właśnie rozróżnienie ról tych elementów oraz umiejętność czytania odwołań typu #id.
