We kunnen tekst stroming langs een gebogen lijn met drie instrumenten ingebouwd in SVG: , en .
Het fragment
Dangerous Curves Ahead Hoe we daar zijn gekomen
Stel je voor dat we een gebogen lijn tekenen in SVG en het een ID geven met de naam curve.
Zie de Pen NgwPYB door Geoff Graham (@geoffgraham) op CodePen.
Vervolgens plaatsen we inhoud in de SVG met behulp van de tag en geven we deze een breedte die overeenkomt met de SVG- viewBoxafmetingen. We gaan nog niets zien, maar we weten dat de tekst ergens buiten het scherm staat.
Zie de Pen ZyaYOw door Geoff Graham (@geoffgraham) op CodePen.
We willen die tekst echt zien. We kunnen onze tekst in de tag plaatsen en deze zo instellen dat deze de lijnen van ons gebogen pad volgt door de pad-ID aan te roepen die we eerder hebben ingesteld.
Zie de Pen Kqywpe door Geoff Graham (@geoffgraham) op CodePen.
Nu koken we op gas!
We willen niet dat die curve zichtbaar is, dus laten we het pad transparant opvullen. We zouden dit ook in CSS kunnen doen, maar we passen het inline rechtstreeks in de SVG-opmaak toe voor dit voorbeeld.
Zie de Pen xrPbgx door Geoff Graham (@geoffgraham) op CodePen.
De rest is CSS! De exacte lettergrootte hangt af van de tekst zelf en welke lettertypefamilie wordt gebruikt, maar als je eenmaal de juiste balans hebt gevonden, zal de SVG zelf het reactievermogen afhandelen en ervoor zorgen dat alles op elke schaal op de curve blijft.
Zie de Pen SVG-tekst langs een gebogen pad door Geoff Graham (@geoffgraham) op CodePen.
We zouden dezelfde methode kunnen toepassen op elk type gebogen pad.
Zie de Pen SVG-tekst langs een gebogen pad door Geoff Graham (@geoffgraham) op CodePen.