Можно ли градиент из svg перенести в css?

Question

[Lex_pvl]

https://codepen.io/Lex_pvl/pen/GbWQva
Вот svg

Comments

[Rustam Bainazarov]

https://fvsch.com/svg-gradient-fill/

Полноценно — нет, к сожалению.

[Lex_pvl]

Рустам Байназаров, Ну просто в моем примере 29 айдишников,
и к тому еще при наводке нужно менять цвет на белый..

[Rustam Bainazarov]

Lex_pvl, могу посоветовать лишь только объединить пути в один или несколько.

И использовать один градиент.

[Rustam Bainazarov]

Lex_pvl, ну и плюс, надо вот так переделать координаты градиента, чтобы он был универсальным:

https://stackoverflow.com/questions/5445744/is-it-...

[RAX7]

Lex_pvl,
https://jsfiddle.net/RAX7/j9vhqmrb/1/

[Lex_pvl]

RAX7, Круто, ты реально сам сидел и переделывал?

[RAX7]

Lex_pvl, это не так сложно, если знаешь что делать)

[Lex_pvl]

RAX7, Как можно с тобой связаться? )

[RAX7]

Lex_pvl, можешь тут писать, по возможности отвечу

[Lex_pvl]

RAX7, Ну у меня просто еще 5 таких свг(

[Lex_pvl]

RAX7, Поможешь?

[RAX7]

Lex_pvl, чем именно? градиент уже вынесен в отдельную svg, осталось только вставлять иконки и задавать им fill: url(#grad) через css

Answer 1

[forspamonly2]

в таком случае надо те пути (элементы path), которые рисуются каждый своим градиентом, почистить от этих градиентов, цветов и заливок и обернуть в один элемент clipPath. а потом вывести прямоугольник, которому указать в качестве clip-path тот элемент. а уже этот прямоугольник стилизовать любым удобным вам способом - градиентом, картинкой, с анимацией и т.д.

то есть, нужно сделать из картинки трафарет, через который показывать что угодно.

простое механическое действие: грохнуть все градиенты, все атрибуты fill в путях, перенести пути в def > clipPath с айдишником, добавить rect c clip-path="url(#тот_айдишник)", пользоваться.