Как сделать свечение вокруг SVG иконки?

680
27 мая 2017, 17:15

Как создать свечение вокруг иконки SVG? Иконка SVG будет являться ссылкой, то есть hover работает только в рамках этой иконки. Форма иконки сложная (не квадрат или груг). Иконка то же должна менять цвет при наведении.

Answer 1

Вот так:

.icon:hover { 
  filter: drop-shadow(0 0 10px red); 
} 
.icon:hover path { 
  fill: red; 
}
<svg x="0px" y="0px" viewbox="0 0 478.2 478.2" width="100" height="100" class="icon"> 
  <path d="M457.575,325.1c9.8-12.5,14.5-25.9,13.9-39.7c-0.6-15.2-7.4-27.1-13-34.4c6.5-16.2,9-41.7-12.7-61.5    c-15.9-14.5-42.9-21-80.3-19.2c-26.3,1.2-48.3,6.1-49.2,6.3h-0.1c-5,0.9-10.3,2-15.7,3.2c-0.4-6.4,0.7-22.3,12.5-58.1    c14-42.6,13.2-75.2-2.6-97c-16.6-22.9-43.1-24.7-50.9-24.7c-7.5,0-14.4,3.1-19.3,8.8c-11.1,12.9-9.8,36.7-8.4,47.7    c-13.2,35.4-50.2,122.2-81.5,146.3c-0.6,0.4-1.1,0.9-1.6,1.4c-9.2,9.7-15.4,20.2-19.6,29.4c-5.9-3.2-12.6-5-19.8-5h-61    c-23,0-41.6,18.7-41.6,41.6v162.5c0,23,18.7,41.6,41.6,41.6h61c8.9,0,17.2-2.8,24-7.6l23.5,2.8c3.6,0.5,67.6,8.6,133.3,7.3    c11.9,0.9,23.1,1.4,33.5,1.4c17.9,0,33.5-1.4,46.5-4.2c30.6-6.5,51.5-19.5,62.1-38.6c8.1-14.6,8.1-29.1,6.8-38.3    c19.9-18,23.4-37.9,22.7-51.9C461.275,337.1,459.475,330.2,457.575,325.1z M48.275,447.3c-8.1,0-14.6-6.6-14.6-14.6V270.1    c0-8.1,6.6-14.6,14.6-14.6h61c8.1,0,14.6,6.6,14.6,14.6v162.5c0,8.1-6.6,14.6-14.6,14.6h-61V447.3z M431.975,313.4    c-4.2,4.4-5,11.1-1.8,16.3c0,0.1,4.1,7.1,4.6,16.7c0.7,13.1-5.6,24.7-18.8,34.6c-4.7,3.6-6.6,9.8-4.6,15.4c0,0.1,4.3,13.3-2.7,25.8    c-6.7,12-21.6,20.6-44.2,25.4c-18.1,3.9-42.7,4.6-72.9,2.2c-0.4,0-0.9,0-1.4,0c-64.3,1.4-129.3-7-130-7.1h-0.1l-10.1-1.2    c0.6-2.8,0.9-5.8,0.9-8.8V270.1c0-4.3-0.7-8.5-1.9-12.4c1.8-6.7,6.8-21.6,18.6-34.3c44.9-35.6,88.8-155.7,90.7-160.9    c0.8-2.1,1-4.4,0.6-6.7c-1.7-11.2-1.1-24.9,1.3-29c5.3,0.1,19.6,1.6,28.2,13.5c10.2,14.1,9.8,39.3-1.2,72.7    c-16.8,50.9-18.2,77.7-4.9,89.5c6.6,5.9,15.4,6.2,21.8,3.9c6.1-1.4,11.9-2.6,17.4-3.5c0.4-0.1,0.9-0.2,1.3-0.3    c30.7-6.7,85.7-10.8,104.8,6.6c16.2,14.8,4.7,34.4,3.4,36.5c-3.7,5.6-2.6,12.9,2.4,17.4c0.1,0.1,10.6,10,11.1,23.3    C444.875,295.3,440.675,304.4,431.975,313.4z"></path> 
</svg>

READ ALSO
Несколько критериев для одного поля

Несколько критериев для одного поля

Здравствуйте! Есть бд с сообщениями, которая содержит id отправителя, id получателя и само сообщениеНужно сделать так чтобы выводились все...

270
выборка в mysql: массив - массив

выборка в mysql: массив - массив

Есть массив вида array(1, 10, 22) - то, что выбрал в форме пользователь (в данном случае выбрано 3 категории)Есть БД, где для каждой записи указаны...

280
Настройки приложения

Настройки приложения

Есть xml файл с разметкой 3 радиобаттона, при нажатии на каждый должны меняться фрагменты в контейнере, как можно сделать чтобы их положения...

301
Перебор объектов в массиве

Перебор объектов в массиве

Вывод: Sanfe Sanfe Что не так делаю, тоже самое если сделать ArrayList

375