Me ei saa voolata teksti piki kõverjoon kolme tööriistad ehitatud otse SVG: , ja .
Jupp
Dangerous Curves Ahead Kuidas me sinna jõudsime
Kujutage ette, et tõmbame SVG-sse kõvera joone ja anname sellele nimega ID curve.
Vaadake CodePenilt Geoff Graham (@geoffgraham) Pen NgwPYB.
Seejärel viskame sildi abil sisu SVG-sse ja anname sellele laiuse, mis vastab SVG- viewBoxdimensioonidele. Me ei näe veel midagi, kuid teame, et tekst on kusagil ekraanilt väljas.
Vaadake CodePeni saidil Geoff Graham (@geoffgraham) Pen ZyaYOw.
Me tõesti tahame seda teksti näha. Saame oma teksti sildi sisse mähkida ja seada selle järgima meie kõvera tee jooni, helistades varem määratud tee ID-le.
Vaadake CodePenil Geoff Grahami (@geoffgraham) Pen Kqywpe'i.
Nüüd küpsetame gaasiga!
Me ei taha, et seda kõverat nähakse, seega anname teele läbipaistva täitmise. Võiksime seda teha ka CSS-is, kuid rakendame selle näite huvides seda otse SVG märgistuses.
Vaadake Code x penilt Geoff Graham (@geoffgraham) Pen xrPbgx.
Ülejäänud on CSS! Täpne fondi suurus sõltub tekstist endast ja kasutatavast fondiperekonnast, kuid kui olete õige tasakaalu saavutanud, tegeleb SVG ise reageerimisvõimega ja tagab, et kõik püsiks kõveras mis tahes skaalal.
Vaadake CodePenilt Geoff Graham'i (@geoffgraham) pliiatsi SVG teksti mööda kõverat rada.
Me võiksime seda sama meetodit rakendada mis tahes tüüpi kõverate teede korral.
Vaadake CodePenilt Geoff Graham'i (@geoffgraham) pliiatsi SVG teksti mööda kõverat rada.