Можемо тећи текст дуж заобљеног складу са три алата уграђених у праву у СВГ: ,
и
.
Тхе Сниппет
Dangerous Curves Ahead
Како смо дошли тамо
Замислите да у СВГ нацртамо криву линију и дамо јој ИД који се зове curve
.
Погледајте Пен НгвПИБ од Геофф Грахам (@геоффграхам) на ЦодеПен.
Затим испуштамо садржај у СВГ помоћу ознаке и дајемо му ширину која одговара СВГ
viewBox
димензијама. Још нећемо ништа видети, али знамо да је текст негде изван екрана.
Погледајте Пен ЗиаИОв од Геофф Грахам (@геоффграхам) на ЦодеПен.
Заиста желимо да видимо тај текст. Текст можемо умотати у ознаку и подесити га да прати линије наше закривљене путање позивањем ИД-а пута који смо раније поставили.
Погледајте Пен Ккивпе, аутора Геофф Грахам (@геоффграхам) на ЦодеПен.
Сад кувамо на бензин!
Не желимо да се та крива види, па дајмо путањи прозирно попуњавање. То бисмо могли да урадимо и у ЦСС-у, али га примењујемо убачено директно у СВГ ознаку ради овог примера.
Погледајте оловку крПбгк Геофф Грахам (@геоффграхам) на ЦодеПен.
Остало је ЦСС! Тачна величина фонта зависиће од самог текста и од тога која се породица фонтова користи, али када успоставите прави баланс, СВГ ће се сам побринути за одзив и обезбедити да све остане на кривој у било којој мери.
Погледајте текст СВГ оловке дуж закривљене стазе Геофф Грахам (@геоффграхам) на ЦодеПен.
Ову исту методу могли бисмо применити на било који тип криве путање.
Погледајте текст СВГ оловке дуж закривљене стазе Геофф Грахам (@геоффграхам) на ЦодеПен.