Můžeme proudit textu podél zakřivené linie se třemi nástroji vestavěnými přímo do SVG: , a .
Úryvek
Dangerous Curves Ahead Jak jsme se tam dostali
Představte si, že nakreslíme zakřivenou čáru v SVG a dáme jí ID s názvem curve.
Podívejte se na Pen NgwPYB od Geoffa Grahama (@geoffgraham) na CodePen.
Poté obsah pomocí značky přetáhneme do SVG a dáme mu šířku, která odpovídá viewBoxrozměrům SVG . Zatím nic neuvidíme, ale víme, že text je někde mimo obrazovku.
Podívejte se na Pen ZyaYOw od Geoffa Grahama (@geoffgraham) na CodePen.
Opravdu chceme vidět ten text. Náš text můžeme zabalit do značky a nastavit ji tak, aby sledovala řádky naší zakřivené cesty voláním ID cesty, které jsme nastavili dříve.
Podívejte se na Pen Kqywpe od Geoffa Grahama (@geoffgraham) na CodePen.
Nyní vaříme s benzínem!
Nechceme, aby byla tato křivka viditelná, proto dáme této cestě průhlednou výplň. Mohli bychom to udělat také v CSS, ale kvůli tomuto příkladu to aplikujeme přímo v označení SVG.
Podívejte se na pero xrPbgx od Geoffa Grahama (@geoffgraham) na CodePen.
Zbytek je CSS! Přesná velikost písma bude záviset na samotném textu a na tom, která rodina písem se používá, ale jakmile dosáhnete správné rovnováhy, samotný SVG zvládne odezvu a zajistí, že vše zůstane na křivce v jakémkoli měřítku.
Podívejte se na text SVG pera podél zakřivené cesty od Geoffa Grahama (@geoffgraham) na CodePen.
Tuto stejnou metodu bychom mohli použít na jakýkoli typ zakřivené cesty.
Podívejte se na text SVG pera podél zakřivené cesty od Geoffa Grahama (@geoffgraham) na CodePen.