Wir können Text entlang einer gekrümmten Linie fließen mit drei Werkzeugen direkt in SVG gebaut: , und .
Das Snippet
Dangerous Curves Ahead Wie wir dorthin gekommen sind
Stellen Sie sich vor, wir zeichnen eine gekrümmte Linie in SVG und geben ihr eine ID mit dem Namen curve.
Siehe den Pen NgwPYB von Geoff Graham (@geoffgraham) auf CodePen.
Anschließend legen wir den Inhalt mithilfe des Tags in der SVG ab und geben ihm eine Breite, die den SVG- viewBoxAbmessungen entspricht. Wir werden noch nichts sehen, aber wir wissen, dass der Text irgendwo außerhalb des Bildschirms angezeigt wird.
Siehe den Pen ZyaYOw von Geoff Graham (@geoffgraham) auf CodePen.
Wir wollen diesen Text wirklich sehen. Wir können unseren Text in das Tag einbinden und festlegen, dass er den Linien unseres gekrümmten Pfads folgt, indem wir die zuvor festgelegte Pfad-ID aufrufen.
Siehe den Pen Kqywpe von Geoff Graham (@geoffgraham) auf CodePen.
Jetzt kochen wir mit Gas!
Wir möchten nicht, dass diese Kurve angezeigt wird. Geben Sie dem Pfad also eine transparente Füllung. Wir könnten dies auch in CSS tun, aber wir wenden es für dieses Beispiel direkt im SVG-Markup inline an.
Siehe den Stift xrPbgx von Geoff Graham (@geoffgraham) auf CodePen.
Der Rest ist CSS! Die genaue Schriftgröße hängt vom Text selbst und der verwendeten Schriftfamilie ab. Sobald Sie jedoch die richtige Balance gefunden haben, übernimmt die SVG selbst die Reaktionsfähigkeit und stellt sicher, dass in jeder Skala alles auf der Kurve bleibt.
Siehe den SVG-Text des Stifts entlang eines gekrümmten Pfades von Geoff Graham (@geoffgraham) auf CodePen.
Wir könnten dieselbe Methode auf jede Art von gekrümmtem Pfad anwenden.
Siehe den SVG-Text des Stifts entlang eines gekrümmten Pfades von Geoff Graham (@geoffgraham) auf CodePen.