Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.63/8: Рейтинг темы: голосов - 8, средняя оценка - 4.63
0 / 0 / 0
Регистрация: 05.11.2019
Сообщений: 12
1

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

03.12.2019, 00:09. Просмотров 1556. Ответов 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
29 / 14 / 9
Регистрация: 19.10.2019
Сообщений: 27
03.12.2019, 17:27 2
Попробуйте
HTML5
1
2
<svg class="svg_1234" width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
...
CSS
1
2
3
.svg_1234:hover > path{
  fill: orange;
}
0
0 / 0 / 0
Регистрация: 05.11.2019
Сообщений: 12
04.12.2019, 18:42  [ТС] 3
вот разную вложенность пробовал,а именно этот способ нет. и он сработал!
спасибо!!!!!!!!!!
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
04.12.2019, 18:42

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

при ховере бордер не проподает
Учусь верстать много траблов, нужен взгляд со сторонны профи)) И какое-нибудь направление в нужное...

Сменить цвет при ховере
Есть такое меню для сайта: Как сделать, чтобы при наведении на каждую кнопку менялся цвет...

Как покрасить столбы при экспорте в Excel
Добрый день, имеется код экспорта в Excel System.Data.DataTable dit = null; try ...

Как подключить и создать свг с контуром и оформить внутри него надписи
Вопрос для тех, у кого время есть как подключить и создать свг с этим контуром и как оформить...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

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