Możemy płynąć tekst wzdłuż zakrzywionych linii z trzech narzędzi wbudowanych w prawo w SVG: , i .
Fragment
Dangerous Curves Ahead Jak się tam dostaliśmy
Wyobraź sobie, że rysujemy zakrzywioną linię w SVG i nadajemy jej identyfikator o nazwie curve.
Zobacz Pen NgwPYB autorstwa Geoffa Grahama (@geoffgraham) na CodePen.
Następnie umieszczamy zawartość w SVG za pomocą tagu i nadajemy jej szerokość, która odpowiada viewBoxwymiarom SVG . Nie zobaczymy jeszcze niczego, ale wiemy, że tekst jest gdzieś poza ekranem.
Zobacz Pen ZyaYOw autorstwa Geoffa Grahama (@geoffgraham) na CodePen.
Naprawdę chcemy zobaczyć ten tekst. Możemy zawinąć nasz tekst w znacznik i ustawić go tak, aby podążał za liniami naszej zakrzywionej ścieżki, wywołując identyfikator ścieżki, który ustawiliśmy wcześniej.
Zobacz Pen Kqywpe autorstwa Geoffa Grahama (@geoffgraham) na CodePen.
Teraz gotujemy na gazie!
Nie chcemy, aby ta krzywa była widoczna, więc nadajmy ścieżce przezroczyste wypełnienie. Moglibyśmy to również zrobić w CSS, ale na potrzeby tego przykładu stosujemy to bezpośrednio w kodzie SVG.
Zobacz Pen xrPbgx autorstwa Geoffa Grahama (@geoffgraham) na CodePen.
Reszta to CSS! Dokładny rozmiar czcionki będzie zależał od samego tekstu i używanej rodziny czcionek, ale gdy osiągniesz odpowiednią równowagę, sam SVG zajmie się responsywnością i zapewni, że wszystko pozostanie na krzywej w dowolnej skali.
Zobacz tekst Pen SVG wzdłuż zakrzywionej ścieżki autorstwa Geoffa Grahama (@geoffgraham) na CodePen.
Moglibyśmy zastosować tę samą metodę do dowolnego typu zakrzywionej ścieżki.
Zobacz tekst Pen SVG wzdłuż zakrzywionej ścieżki autorstwa Geoffa Grahama (@geoffgraham) na CodePen.