Как изменить цвет svg заливки?
Добрый вечер.
Подскажите, по ховеру нужно менять цвет заливки svg, в примере работает как нужно, проблема в том, что сердец таких будет много, и если менять фон привязываясь к id валидатор будет ругаться.
Есть еще какой-то способ менять цвет на градиентную заливку, но не привязываюсь к id svg ?
Пример codepen
Дополнительно:
1. Почитайте про <use>, в том числе и прямо в svg. Нет смысла дублировать один и тот же градиент 1000 раз. Да и сами сердечки тоже.
2. Почитайте про css свойство mask. А в качестве bg задавайте градиент.
Ответы:
конечно порнуха, но я завтра буду дома и сделаю по нормальному
в общем, градиент не возможно сделать с анимацией, но я попробую сделать это но будет с избыточным кодом, такую шляпу лучше вставлять в html скриптом
snippet
заливка одинаковая у всех сердец? если да, то описание градиента выносится в отдельный блок или оставляется только в первом svg, а остальные его спокойно используют
- спасибо, попробую
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для изменения цвета заливки в SVG можно использовать атрибут fill. В зависимости от того, как вы хотите изменить цвет, есть несколько способов:
1. Изменение цвета на конкретный:
2. Использование CSS для изменения цвета:
3. Использование внешнего CSS-файла:
HTML:
CSS (styles.css):
.circle { fill: green; }
4. Использование JavaScript для динамического изменения цвета:
HTML:
<button>Change Color</button> function changeColor() { document.getElementById("myCircle").setAttribute("fill", "purple"); }<button>Change Color</button> function changeColor() { document.getElementById("myCircle").setAttribute("fill", "purple"); }
Это основные способы изменения цвета заливки в SVG. Вы можете выбрать подходящий для вашего проекта и применить его для достижения нужного эффекта.