Môžeme prúdiť textu pozdĺž zakrivené línie s tromi nástrojmi vstavanými priamo do SVG: , a .
Úryvok
Dangerous Curves Ahead Ako sme sa tam dostali
Predstavte si, že v SVG nakreslíme zakrivenú čiaru a dáme jej ID s názvom curve.
Prezrite si pero NgwPYB od Geoffa Grahama (@geoffgraham) na serveri CodePen.
Potom pomocou značky umiestnime obsah do SVG a dáme mu šírku, ktorá zodpovedá viewBoxrozmerom SVG . Zatiaľ nič neuvidíme, ale vieme, že text je niekde mimo obrazovku.
Prezrite si Pen ZyaYOw od Geoffa Grahama (@geoffgraham) na stránkach CodePen.
Naozaj chceme vidieť tento text. Náš text môžeme zabaliť do značky a nastaviť ho tak, aby sledoval riadky našej zakrivenej cesty tak, že zavoláme ID cesty, ktoré sme nastavili skôr.
Prezrite si Pen Kqywpe od Geoffa Grahama (@geoffgraham) na stránkach CodePen.
Teraz varíme s benzínom!
Nechceme, aby bola táto krivka viditeľná, preto dajme cestičke priehľadnú výplň. Mohli by sme to urobiť aj v CSS, ale kvôli tomuto príkladu to aplikujeme vložené priamo do označenia SVG.
Pozrite si pero xrPbgx od Geoffa Grahama (@geoffgraham) na serveri CodePen.
Zvyšok je CSS! Presná veľkosť písma bude závisieť od samotného textu a od použitej rodiny fontov, ale akonáhle dosiahnete správnu rovnováhu, samotný SVG zvládne odozvu a zabezpečí, že všetko zostane na krivke v akomkoľvek meradle.
Prečítajte si text pera SVG pozdĺž zakrivenej cesty od Geoffa Grahama (@geoffgraham) na stránke CodePen.
Rovnakú metódu by sme mohli použiť na akýkoľvek typ zakrivenej cesty.
Prečítajte si text pera SVG pozdĺž zakrivenej cesty od Geoffa Grahama (@geoffgraham) na stránke CodePen.