Как залить другим цветом часть текста через CSS и SVG?

Question

[Шигаев.]

Как, при вёрстке, залить цветом часть текста по форме того или иного шейпа?

Answer 1

[Андрей Федоров]

https://codepen.io/aliencash/pen/VwjEprb?editors=1100

Comments

[Softlink]

А если фигуры сложные, то можно по такому же принципу использовать svg, только не забывать закрашивать не только фигуру, но и весь холст в цвет текста.

[Шигаев.]

Там получается наложение фигуры. Тоже интересно, но немного не то: мне нужно, чтобы закрашивался лишь текст, как в моём примере. Не подскажете решение?

[Андрей Федоров]

Шигаев., там не наложение фигуры, это просто я ошибся при редактировании кода в кодпене... Сейчас поправил.

[Шигаев.]

Андрей Федоров, офигенске. Спасибо!

Answer 2

[Виктор Таран]

При экспорте в illustrator укажите текст шрифтом, а так же галочку отдельный css файл для удобства.
Для минификации можно оставить галочку использовать в шрифте только используемые в макете символы, в таком случае шрифт будет состоять из 3-5 букв которые вы использовали
в таком случае надпись в вашем логотипе будет в виде "Вася2" + стили
Так же в свг прекрасно работают классы в общем проблем с этим вообще нет.
Вообще в илюстраторе при экспорте много чего можно указать что облечет вам работу.
вот пример работы анимации на шрифте. в данном случае его пришлось перезаливать в path посколкьу нужны контуры.https://ks03.ru/bustier/assets/img/logo.svg

Вообще в свг можно сделать куда больше чем просто покрасить шрифт

Comments

[Шигаев.]

Спасибо за полезный пример. Не подскажете, как сделать всё с различными текстами? С SVG ясно, само собой он делается в Иллюстраторе. Но шейпы будут накладываться на уже существующие тексты в блоках — заголовки, параграфы, div, flex grid... Как сделать то же самое с картинками — понятно. Но как с шейпами, да ещё чтобы сработал нужный оверлей?