Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Другие темы раздела
HTML, CSS Выравнивание Флекс бокса по центру https://www.cyberforum.ru/ html/ thread2544824.html
https://ibb.co/stkDdGG как выровнить элементы по центру, когда делаю отступ padding-left:40px все блоки съезжают налево, а нужно все кроме 1-го, и 1-го во второй строке <div class="infos">...
Не работают свойства тегов HTML, CSS
Помогите пожалуйста, заранее извиняюсь если такой вопрос уже был, но я ничего не видел. Случилась такая проблема, что не работает css свойства для тегов (body, head, и других которые заключают под...
HTML, CSS Редактирование абзацев HTML
Как убрать отступы, чтобы было как на приложенном скриншоте? Мой код: <p><Tim>C.Зима<br>D.Весна<br></Tim></p> <ul type="circle"> <li>Декабрь</li> <li>Январь</li> <li>Февраль</li>...
HTML, CSS Модальный блок Здравствуйте. Сделал модальный блок, который выводит список игроков на игровом сервере. Проблема заключается в том, что он отображается не полностью. Он сначала заходил на нижнюю часть сайта. Я его... https://www.cyberforum.ru/ html/ thread2544565.html
HTML, CSS При наведении на элемент ссылки, открывается всплывающее меню с div https://www.cyberforum.ru/ html/ thread2544521.html
<li><a class="korz">Корзина</a></li> <div class="menu_gap"> <div id="lsp-block-cart" class="lsp-block-cart"></div> .menu_gap { position: absolute; top: 100%; right:...
Кнопки button type="submit" с иконкой icomoon внутри HTML, CSS
Здравствуйте! Бился я долго и нужно, чтобы сделать button type="submit" с иконкой внутри и добился. Код такой получился <button type="submit" class="playBtn icon-play-circle...
Почему margin-top ребёнка сдвигает родителя - как избежать этого? HTML, CSS
Здравствуйте, начал изучать CSS и столкнулся с такой проблемой. Есть div у которого margin-top: 50px и он сдвигает родительский блок body на высоту этого отступа. html, body { margin: 0px; } ...
HTML, CSS Вывод на сайт Добрый день! Делаю форму поиска тура. Нужно вывести выбранные в поле значения на сайт..Но не знаю как..Помогите пожалуйста! https://www.cyberforum.ru/ html/ thread2544386.html
HTML, CSS Не работает плавный переход к блоку https://www.cyberforum.ru/ html/ thread2544376.html
Посмотрите код. Почему-то не хочет плавно переходить к блоку. Сразу резкий переход
HTML, CSS Анимация элемента div Привет, я новичок, разрабатываю дизайн для сайта, возник вопрос с анимацией элемента и вообще в правильности подхода подхода к разработки анимации. div элемент выступает в роли линии, при нажатии на... https://www.cyberforum.ru/ html/ thread2544353.html
0 / 0 / 0
Регистрация: 05.11.2019
Сообщений: 12
0

Как покрасить свг-шку при ховере?

03.12.2019, 00:09. Показов 1699. Ответов 2
Метки (Все метки)

Только начинаю разбираться с манипуляциями над векторной графикой.
Картинка сохранена из шаблона, над градиентом не я колдовал.
Как при ховере ее покрасить в белый?
Чему давать класс и id, чтобы сначала перенести в стили fill, а потом и fill на ховере? Всему svg, g, всем path-ам?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<svg width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.2063 49.419H49.2439V30.7543H26.2063V49.419ZM35.4213 32.3097H40.0288V33.8651H35.4213V32.3097ZM27.7421 32.3097H33.8855V35.4205H41.5647V32.3097H47.708V47.8636H27.7421V32.3097Z" fill="url(#paint0_linear)"/>
<path d="M44.6364 44.7529H46.1722V46.3083H44.6364V44.7529Z" fill="url(#paint1_linear)"/>
<path d="M41.5647 44.7529H43.1005V46.3083H41.5647V44.7529Z" fill="url(#paint2_linear)"/>
<path d="M38.493 44.7529H40.0289V46.3083H38.493V44.7529Z" fill="url(#paint3_linear)"/>
<path d="M47.7081 16.7558H46.1722V1.20178H26.2063V16.7558H24.6705V1.20178H4.70461V16.7558H3.16877C2.32176 16.7558 1.63293 17.4534 1.63293 18.3112V19.8666C1.63293 20.7244 2.32176 21.422 3.16877 21.422H7.21033C7.08286 21.9205 7.00837 22.4392 7.00837 22.9774C7.00837 25.1394 8.10419 27.0455 9.76136 28.1607C5.05939 29.6306 1.63293 34.0712 1.63293 39.309C1.63293 40.8994 2.58285 42.2658 3.93669 42.8678V49.4191H24.6705V39.309C24.6705 34.0712 21.2441 29.6306 16.5421 28.1607C18.1993 27.0455 19.2951 25.1394 19.2951 22.9774C19.2951 22.4392 19.2206 21.9205 19.0931 21.422H47.7081C48.5551 21.422 49.2439 20.7244 49.2439 19.8666V18.3112C49.2439 17.4534 48.5551 16.7558 47.7081 16.7558ZM33.8855 2.75718H38.4931V4.31258H33.8855V2.75718ZM27.7422 2.75718H32.3497V5.86798H40.0289V2.75718H44.6364V16.7558H40.0289V13.645H32.3497V16.7558H27.7422V2.75718ZM38.4931 16.7558H33.8855V15.2004H38.4931V16.7558ZM12.3838 2.75718H16.9913V4.31258H12.3838V2.75718ZM6.24045 2.75718H10.848V5.86798H18.5272V2.75718H23.1347V16.7558H18.5272V13.645H10.848V16.7558H6.24045V2.75718ZM12.3838 16.7558V15.2004H16.9913V16.7558H12.3838ZM3.16877 19.8666V18.3112H9.10172C8.60257 18.756 8.17561 19.2809 7.83926 19.8666H3.16877ZM5.47253 43.1975H8.54421V47.8637H5.47253V43.1975ZM12.7678 37.7536H10.08V33.8651H15.4555V37.7536H19.2951V47.8637H10.08V43.1975H12.7678C14.2498 43.1975 15.4555 41.9765 15.4555 40.4756C15.4555 38.9746 14.2498 37.7536 12.7678 37.7536ZM16.9913 34.9648L18.2092 36.1982H16.9913V34.9648ZM23.1347 39.309V47.8637H20.8309V36.654L16.5413 32.3097H8.54421V37.7536H6.24045V39.309H12.7678C13.4028 39.309 13.9196 39.8324 13.9196 40.4756C13.9196 41.1187 13.4028 41.6421 12.7678 41.6421H5.47253C4.20239 41.6421 3.16877 40.5953 3.16877 39.309C3.16877 33.7345 7.64728 29.1989 13.1517 29.1989C18.6562 29.1989 23.1347 33.7345 23.1347 39.309ZM13.1517 27.6435C10.6107 27.6435 8.54421 25.5508 8.54421 22.9774C8.54421 20.4039 10.6107 18.3112 13.1517 18.3112C15.6928 18.3112 17.7592 20.4039 17.7592 22.9774C17.7592 25.5508 15.6928 27.6435 13.1517 27.6435ZM47.7081 19.8666H18.4642C18.1286 19.2809 17.7009 18.756 17.2017 18.3112H47.7081V19.8666Z" fill="url(#paint4_linear)"/>
<path d="M38.493 41.6421H46.1722V43.1975H38.493V41.6421Z" fill="url(#paint5_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="49.2439" y1="41.6067" x2="26.2063" y2="41.6067" gradientUnits="userSpaceOnUse">
<stop stop-color="#2CBFC9"/>
<stop offset="1" stop-color="#3AC737"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="46.1722" y1="45.6573" x2="44.6364" y2="45.6573" gradientUnits="userSpaceOnUse">
<stop stop-color="#2CBFC9"/>
<stop offset="1" stop-color="#3AC737"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="43.1005" y1="45.6573" x2="41.5647" y2="45.6573" gradientUnits="userSpaceOnUse">
<stop stop-color="#2CBFC9"/>
<stop offset="1" stop-color="#3AC737"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="40.0289" y1="45.6573" x2="38.493" y2="45.6573" gradientUnits="userSpaceOnUse">
<stop stop-color="#2CBFC9"/>
<stop offset="1" stop-color="#3AC737"/>
</linearGradient>
<linearGradient id="paint4_linear" x1="49.244" y1="29.2371" x2="1.63301" y2="29.2371" gradientUnits="userSpaceOnUse">
<stop stop-color="#2CBFC9"/>
<stop offset="1" stop-color="#3AC737"/>
</linearGradient>
<linearGradient id="paint5_linear" x1="46.1722" y1="42.5465" x2="38.4931" y2="42.5465" gradientUnits="userSpaceOnUse">
<stop stop-color="#2CBFC9"/>
<stop offset="1" stop-color="#3AC737"/>
</linearGradient>
</defs>
</svg>
Добавлено через 31 минуту
Дополню: на данный момент мне удалось это сделать, задав класс каждому из path-ов. Потом fill вырезал из html и вставил в style.
Может быть есть более прогрессивный способ?

Вернуться к обсуждению:
Как покрасить свг-шку при ховере?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
03.12.2019, 00:09
Готовые ответы и решения:

Как убрать подергивания при ховере?
Здравсnвуйте! Чет не пойму на как убрать подергивания при ховере вот здесь где товары...

Как убрать мельтешение дивов при ховере?
Всем привет. В общем, нужно чтобы у двух дивов был ховер с бекграундом. При наведение на первый...

Градиент при ховере
как такой градиент(фон) сделать? сам стиль? Если ещё кто нибудь объяснил бы как он градиенты эти...

Дерганая анимация при ховере
Пишу простенькую анимацию на каскадных таблицах стилей, проблема следующая: #container { ...

__________________
2
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.