Закривљени текст дуж пута - ЦСС-трикови

Anonim

Можемо тећи текст дуж заобљеног складу са три алата уграђених у праву у СВГ: , и .

Тхе Сниппет

 Dangerous Curves Ahead 

Како смо дошли тамо

Замислите да у СВГ нацртамо криву линију и дамо јој ИД који се зове curve.

Погледајте Пен НгвПИБ од Геофф Грахам (@геоффграхам) на ЦодеПен.

Затим испуштамо садржај у СВГ помоћу ознаке и дајемо му ширину која одговара СВГ viewBoxдимензијама. Још нећемо ништа видети, али знамо да је текст негде изван екрана.

Погледајте Пен ЗиаИОв од Геофф Грахам (@геоффграхам) на ЦодеПен.

Заиста желимо да видимо тај текст. Текст можемо умотати у ознаку и подесити га да прати линије наше закривљене путање позивањем ИД-а пута који смо раније поставили.

Погледајте Пен Ккивпе, аутора Геофф Грахам (@геоффграхам) на ЦодеПен.

Сад кувамо на бензин!

Не желимо да се та крива види, па дајмо путањи прозирно попуњавање. То бисмо могли да урадимо и у ЦСС-у, али га примењујемо убачено директно у СВГ ознаку ради овог примера.

Погледајте оловку крПбгк Геофф Грахам (@геоффграхам) на ЦодеПен.

Остало је ЦСС! Тачна величина фонта зависиће од самог текста и од тога која се породица фонтова користи, али када успоставите прави баланс, СВГ ће се сам побринути за одзив и обезбедити да све остане на кривој у било којој мери.

Погледајте текст СВГ оловке дуж закривљене стазе Геофф Грахам (@геоффграхам) на ЦодеПен.

Ову исту методу могли бисмо применити на било који тип криве путање.

Погледајте текст СВГ оловке дуж закривљене стазе Геофф Грахам (@геоффграхам) на ЦодеПен.