Mes gali tekėti tekstą kartu lenkta linija su trimis įrankiais pastatyti tiesiai į SVG: , ir .
Fragmentas
Dangerous Curves Ahead Kaip mes ten patekome
Įsivaizduokite, kad mes nubrėžėme išlenktą liniją SVG ir suteikiame jai vadinamą ID curve.
Žr. Geoffo Grahamo (@geoffgraham) „Pen NgwPYB“ „CodePen“.
Tada, naudodami žymą , mes įkeliame turinį į SVG ir suteikiame jam plotį, atitinkantį SVG viewBoxmatmenis. Kol kas nieko nematysime, bet žinome, kad tekstas kažkur yra už ekrano.
Žr. Geoff Graham (@geoffgraham) „Pen ZyaYOw“ rašiklį „CodePen“.
Mes labai norime pamatyti tą tekstą. Mes galime apvynioti savo tekstą žymoje ir nustatyti ją sekti mūsų išlenkto kelio linijas, paskambinę anksčiau nustatytu kelio ID.
Žr. Geoffo Grahamo (@geoffgraham) „Pen Kqywpe“ „CodePen“.
Dabar mes gaminame maistą su dujomis!
Mes nenorime, kad ši kreivė būtų matoma, todėl suteiksime kelią skaidriai. Mes taip pat galėtume tai padaryti CSS, tačiau šį pavyzdį pritaikome tiesiai į SVG žymėjimą.
Žr. Geoffo Grahamo (@geoffgraham) „Pen xrPbgx“ iš „CodePen“.
Likusi dalis yra CSS! Tikslus šrifto dydis priklausys nuo paties teksto ir naudojamos šriftų grupės, tačiau, kai pasieksite reikiamą pusiausvyrą, SVG pati susitvarkys su reagavimu ir užtikrins, kad viskas liktų kreivėje bet kokiu masteliu.
Peržiūrėkite Geoffo Grahamo (@geoffgraham) „Pen SVG“ tekstą palei kreivą kelią „CodePen“.
Tą patį metodą galėtume pritaikyti bet kokio tipo išlenktam keliui.
Peržiūrėkite Geoffo Grahamo (@geoffgraham) „Pen SVG“ tekstą palei kreivą kelią „CodePen“.