How to fill a part of text with a different color using CSS and SVG?

S

Shigaev.2020-11-09 08:14:43

css

Shigaev., 2020-11-09 08:14:43

How, during layout, to fill with color a part of the text in the form of one or another shape?

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

Andrey Fedorov, 2020-11-09
@Shigaev

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

V

Viktor Taran, 2020-11-09
@shambler81

When exporting to illustrator, specify the text in font, as well as check a separate css file for convenience.
For minification, you can leave a checkmark to use in the font only the symbols used in the layout, in which case the font will consist of 3-5 letters that you used
in this case, the inscription in your logo will be in the form "Vasya2" + styles
. Classes also work fine in svg in general, there are no problems with this at all.
In general, in illustrator, when exporting, you can specify a lot of things that will give you work.
Here is an example of how animation works on a font. in this case, it had to be re-uploaded to path because contours are needed. https://ks03.ru/bustier/assets/img/logo.svg
_more than just coloring the font