SVG иконки пропадают при нажатии на них в iOS Safari
SVG вставляю через спрайты.
- так выглядит в opera
- так выглядит в iOS Safari после нажатия
- в Macbook Safari при наведении пропадают.
В чем может быть проблема? Ниже код:
.social a {
margin-right: 15px;
color: #bc946e;
text-decoration: none;
}
.social__icon {
display: inline-block;
width: 40px;
height: 40px;
fill: #bc946e;
-webkit-transition: 0.5s all;
transition: 0.5s all;
}
.social__icon:hover {
-webkit-filter: url(#dropshadow);
filter: url(#dropshadow);
color: #cf9f8f;
border-color: #cf9f8f;
fill: #cf9f8f;
}
.social__icon:focus,
.social__icon:active {
outline: none;
}<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=no, viewport-fit=cover" />
</head>
<body>
<div class="social">
<!-- filter -->
<svg display="none">
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" />
<!-- stdDeviation is how much to blur -->
<feOffset dx="1" dy="1" result="offsetblur" />
<!-- how much to offset -->
<feComponentTransfer>
<feFuncA type="linear" slope="0.3" />
<!-- slope is the opacity of the shadow -->
</feComponentTransfer>
<feMerge>
<feMergeNode />
<!-- this contains the offset blurred image -->
<feMergeNode in="SourceGraphic" />
<!-- this contains the element that the filter is applied to -->
</feMerge>
</filter>
</svg>
<!--/ filter -->
<a href="https://instagram.com/" target="_blank">
<svg class="social__icon">
<use
xlink:href="icons/social/sprites/sprite-instagram.svg#instagram"
></use>
</svg>
</a>
<a href="https://wa.me/" target="_blank">
<svg class="social__icon">
<use
xlink:href="icons/social/sprites/sprite-watsapp.svg#watsapp"
></use>
</svg>
</a>
<a href="https://www.youtube.com/" target="_blank">
<svg class="social__icon">
<use
xlink:href="icons/social/sprites/sprite-youtube.svg#youtube"
></use>
</svg>
</a>
<a href="https://vk.com/" target="_blank">
<svg class="social__icon">
<use xlink:href="icons/social/sprites/sprite-vk.svg#vk"></use>
</svg>
</a>
<a href="https://t.me/" target="_blank">
<svg class="social__icon">
<use
xlink:href="icons/social/sprites/sprite-telegram.svg#telegram"
></use>
</svg>
</a>
</div>
</body>
</html>Сами спрайты:
<!-- instagram -->
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="instagram" viewBox="0 0 36.8 36.9" >
<g transform="translate(0.000000,60.000000) scale(0.100000,-0.100000)">
<path d="M95,594.3c-75-16-95-55-95-184c0-102,16-149,56-168c14-6,75-11,139-11c106,0,116,2,142,24c27,24,28,27,31,148
c3,113,2,126-18,150c-11,15-38,32-58,38C256,601.3,135,603.3,95,594.3z M320,541.3c17-17,20-33,20-124c0-89-3-107-21-130
c-20-25-24-26-129-26c-152,0-155,3-155,148c0,151,1,152,152,152C287,561.3,302,559.3,320,541.3z"/>
<path d="M270,511.3c0-15,5-20,18-18c9,2,17,10,17,18c0,8-8,16-17,18C275,531.3,270,526.3,270,511.3z"/>
<path d="M164,504.3c-67-13-93-114-41-159c90-77,214,46,131,130c-15,14-30,26-35,26c-4,0-13,2-21,4C191,507.3,175,506.3,164,504.3z
M236,446.3c32-49-11-106-69-92c-31,8-50,49-37,81C146,478.3,210,485.3,236,446.3z"/>
</g>
</symbol>
</svg>
<!-- watsapp -->
<svg version="1.1" id="watsapp" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;}
</style>
<g id="shape">
<image style="overflow:visible;opacity:0;" width="97" height="97" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGEAAABhCAYAAADGBs+jAAAACXBIWXMAAAsSAAALEgHS3X78AAAA
GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAACzlJREFUeNrsXYtu2zoMpWyl+//P
3WxLFxeoMZYlD0lZTtctBow4fSQ2j/h+iOh1vI7X8Xcc5f381g/wL91ff4Ewfj/lJuL3Fwj6PZTk
fZYAQXvgZ/1fAwERPnKdAaEnr58OSPlC4mvX3mvmnjUie68eON8ahCjB5XUEFASA9tqV91GAbjnq
EwGwiK69t84IEIjw1ikB4Z9V7gajPnH1R4i9GNcIDASCdjbjWgPmKWCUJ65+RHT+uhi/iwCBAGjK
azN+h7hlOhD1yavfIrp3amBEQZBER2dR/ocMruh/IgiR1S+JuyrXqwNGcUIVGgdo52G8nmA0Q5lP
F0/1CQDIVc+JvRrvNUAsbkAgSC7gBJfnovxNeQZX1BsB8IhfBdGrAsQdIMhzF68LA+AQXNEMAC4B
UW8AQJP3q0Lwyggv30dAiOgEBAIn/v7+XfxniwCCf0ebCUS9GQBtpf//+hCErwYQ52eUizqhK6Jo
V86NAbCz7znYM0quuAxEvQkAtPIfDISHAsjqgEABECxu0EQRJ/76fr0aoB/iu9oM3TCLEywANOJr
JwIhIoYiDpslkvb3793Y927ANyEABI2AUS8QX7OCJAByxb+JVwsEyywdOSxzVYokD3z0/e2KxVQv
rP4CFLBc+Zz4bwYIGhG8h++JCIAE42D3uhvGQNQaK1dM11FOKIALNADO84cA5PxbTgD00Ch8UIRI
sHTHCcQqwFiALvCAJcWPuIUTtESMxQVVAPCDASBB0ABA1k4HMZyi6Coy9MnpnFke/BK8HymWrIVx
GYSS4AILAAmCpgNIsce9ABsBHdUMP4OMv4nGp6yzKD7FdE7IAPAwuOBNAaCwVWPFfA4FDFJEkOUs
Lu9/uwgw1kBsqifOkrWW6gQxZOmDN4X4b0IRL+KmUYhBAiG5wTMW+EmA6MURQy0Q8m7iuSAQdRIX
eAo5AkAzPFoNjAZAOD/XchgbU8ySA1bAAc1ICmn3kxJLdYALtJVmAWA5ZYsi+61QggQjAoK8t8r+
vwoLiZSMXk0EAzkQiwAipKTrIBcU5SErAKMqPkBnMR0ZQthYKEECMQrCeU+caA/2nIvybD0gJg9m
7vJ8RJgbRhTzAsITGidIJUwKAJs4fzEQNkUsNWAdaff3EJ/xMCwsKZokpz4MEHhOAnFDGoQCuAGt
tIcRFZU6QALwi50SCAlCN2xyS1/tgoAWiBZHVENnSVFncQO0lGpw9XsrzYqSSjEkVxYH4KcAwgKh
KTF9aaLKe3wYosw6LCAO8Zy7CHtwbmjKgu4zrSMPCIsDOBecxOVE/8nA2BQQpDWC/ISVKdlD6AML
hCKAIBARkCcHohickBJHKFIaJf6qOEaSnSXxz/PkDq6UGxBF2irmqcoaBMAKXy/AELECf4sQS6ZI
qkFRlMmaWQBIU3RTxNFPIIoQF/B7PhRC9ATxpSiiQLLKSseWiEjKeMzIU15BOFpzxrg5ainkzfEP
UCi7i5hQNNa0KgRcHH2IAAiJpBGdsATCAosRkrC4wAIA+QYd3GtXYlEUNGktMArgCKtWKpSMqgl9
4PkK2g2QYpIehlO2OV6yZhF1AEAxAIvGmGT0VQNtSXCCqRdq0DRFFpK2kooRmDuM6obNID7ykL2Y
TCfcWMJX9cbyzJpY7WARLle4IOMnIOJHwsANBOi8GFFUDFmgNKC4D5bg35ipWYUXjKrKPTpouYl+
VSd4wFix+Oa4/IeSQ4hm1MgJlDXxHCdxuW1/OHqIAs+M8tKmcl4uZNWiXGAlaBDxrUxaJFvVQTLG
Kgj2FoXmGBaH+NHynBAIXnozWhGnAdAc8UNJAJBY6oFF0RxuzEiHMBAjUdQMGJEeAS9jla5eABmt
aNl8M1KpGTrQKCcUx0Ii8CWZ+lCUmRol+ghHXLmfCPFD1lFGJ3icgR7We3jt/yhgDY2AkmkoRKIo
GnmmWTph1sMjUTOb4BbxEYdkj0yJpimmngXCdzjKzX//5ZxQ6Hph74zvj4rYqILNcLDJjUvwn2mA
fQvhFGn5AoCyzevI1OxBYqc5IWuHdxAki9jTS5BQM0XMaBgmavmlwViS7BMZQxAx4xbSG8hHBomM
OpjZ/mlPDA37N0ty5WdMTS0rV5yHRR05ZSIHeDmRaO90dDxDvwrCiF0defBI537EH4nmQ6IJKQ2Q
4oRAIotyStjCA4QcTvCSQNGVVwZEUSQli3rmIlXjXuh9OL0Z4QIvyCV7ALz8LM8Ly3yAp3+iC4AD
4BWsaWnangDAjQBU5wELCCtERRHR71pNr1JhNeI2zYvJE54sYFVJPIxrLV0ZBaBlRVJNiKHM8CYN
CK+AClXI8RkTBYglLxeutfLKCnJeOa7lylFe5CA/IfWJi2tSH2QsI+kHVHbjsmxSPgD/nPPnhWLl
LqgmNVK+r/VQaJ2f0cTUUEGw1RIajZAWYHLyek5ZKX0AkYbapJBJzEshOQi8g4h3lFr1s0SxFG2E
C4YUs+cFIhmtWRcNrKAu/ndnir0FRB+RPV3gJLLVUfrmcAEqUkBAuB50Vhx5gSvLHufKFWXYtM9A
lRdkgGAV8aKGxpNLrOrBDACpMp2RZvJo4I6vRmuSltWowQnIc9GdcINIpJ9Oa25/o49N7UsQAFSo
1q/ohFnhak4IzRO22p34kA+vDikCQgUgPBQxVIRpLIuYefXgHrzHTpPapa54qLyHGMV1JPGsNimr
NB4pZNljzacKaL0UJzF3AwAEhKW3+iwQovNOJQhEH+v1EQiV8iWRyDfQJs5Y/XRSDHHC8+JlVLrf
niGOvISNFigjsms0MyBopiqyjKITxmRHKSK+5ARPH/RZIETKX8jhjK7oBGnSroQbyaMRW9TEUhXr
TWvp1Ur4ZQOLVzrpGjQ1IW6iuVkvoUL0sT1Vc/I0y6glQbDK11cjJKHpAN7OZTU1Ziv3blPMIyEN
2bRNSuRTA8DrO7NGgVpFy7JEc3MA8Cyj28SRxQ1W6EJbGVoUVFu5XYQrFsJjdjrFhuIWsvsmJAfI
PjrZVeoBkMrbz3DWvMjiQp9bmJDNz81ZUsBAq8sakEv0uTdAc8R4y9ZPshsatxlW0VVx5FU37yzu
Q8JH0Kq0UQibRJLHe0CvREVbNBvpjYy/AADIKgpzQTafgESO7MiUrv9BdjdntDEkmvAvgczgwUTQ
QfpcjRMA1FGq9TAQ3TiS00ptSnbWALCCYpnRalcDjWim0kZ+R+lOuK8628xyOZSNAJBDRHhMxsrV
RkLU5GTTUM6jGRyAQEChiYPG27mmpTc1ABaFAyrpkx4zJSIl6bPIMWjedOAdxIQ2+jxV3lPEU2Zl
d8JD+Bp9nBuxg8BXBbY52ibF2/zIAsGbk91Inxi/GdfIa280qZx/RCdIZVyMBEgF3mkWgOgOU93Q
OR4IkWTNEVj90weWy7KXTh+3OjlABkoDwLJaLB2ACoijM0ulLpBiFF23pPi5dRMLzcw7Z/rsIPiF
PFUa5IJIqbrnuWdaZ6Om8y3buXTCxa9Ev/cS4A8rp19l5l6XJBAEPGGvaxRtanSQvQUY0Q0NjtEy
SBmi4O9XRfYWwvMduiH2ZugEaRlpBM20zt6+15qnE+Qqa/R5vlunz5OuvAEbXtgBWUYZ66g7jqFF
9EaxfTmn5oYjBNECY9YmdtGtGaN+QXbvzcjZjPfk2P5fsu1jVlZnegmiKdTMLrTejrOZjVCfsi3w
SNOFt0qRV9uT95XdIBuZwCPbAd9KfEqu1sh+ytmVOpJEynBXBwG9CMGftjv5lQZqRJyZIHifN7I9
/B+zNfwVuV0mfc5M4yEzEezLCT+TeOUb3KNF5C8l/J1ELIMEeRbAfwzh/7bjq+ZlvI7X8Tpex992
/CfAAKQONJWnJDLgAAAAAElFTkSuQmCC" transform="matrix(1 0 0 1 -18.7891 -18.2188)">
</image>
<g>
<path d="M0,60l4.24-15.41c-2.61-4.51-3.99-9.62-3.99-14.86C0.26,13.34,13.66,0,30.13,0c7.99,0,15.49,3.1,21.13,8.72
C56.9,14.34,60,21.81,60,29.75c-0.01,16.39-13.41,29.73-29.87,29.73c0,0,0,0,0,0h-0.01c-5,0-9.91-1.25-14.28-3.62L0,60z
M16.57,50.48l0.91,0.54c3.81,2.25,8.18,3.44,12.64,3.45h0.01c13.69,0,24.82-11.09,24.83-24.71c0-6.6-2.58-12.81-7.27-17.48
C43,7.6,36.77,5.02,30.13,5.02c-13.7,0-24.83,11.08-24.84,24.71c0,4.67,1.31,9.22,3.8,13.15l0.59,0.93l-2.51,9.12L16.57,50.48z"/>
</g>
</g>
<g id="phone">
<image style="overflow:visible;opacity:0;" width="103" height="103" xlink:href="data:image/png;base64,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" transform="matrix(1 0 0 1 -21.7891 -16.2188)">
</image>
<g>
<path class="st0" d="M21.94,16.51c-0.55-1.33-1.13-1.35-1.66-1.38c-0.43-0.02-0.92-0.02-1.41-0.02c-0.49,0-1.29,0.2-1.97,1
c-0.68,0.8-2.58,2.72-2.58,6.64c0,3.92,2.65,7.7,3.01,8.23c0.37,0.53,5.11,8.82,12.61,12.01c6.24,2.65,7.5,2.12,8.86,1.99
s4.37-1.92,4.98-3.78c0.62-1.86,0.62-3.45,0.43-3.78c-0.18-0.33-0.68-0.53-1.41-0.93c-0.74-0.4-4.37-2.32-5.04-2.59
c-0.68-0.27-1.17-0.4-1.66,0.4c-0.49,0.8-1.91,2.59-2.34,3.12c-0.43,0.53-0.86,0.6-1.6,0.2c-0.74-0.4-3.12-1.24-5.94-3.95
c-2.19-2.11-3.68-4.71-4.11-5.51c-0.43-0.8-0.05-1.23,0.32-1.62c0.33-0.36,0.74-0.93,1.11-1.39c0.37-0.46,0.49-0.8,0.74-1.33
c0.25-0.53,0.12-1-0.06-1.39C24.03,22.02,22.59,18.08,21.94,16.51z"/>
</g>
</g>
</svg>
<!-- youtube -->
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="youtube" viewBox="0 0 63.000000 63.000000">
<g transform="translate(0.000000,63.000000) scale(0.100000,-0.100000)"
stroke="none">
<path d="M213 612 c-264 -94 -286 -456 -35 -579 48 -24 70 -28 137 -28 67 0
89 4 137 28 65 32 121 90 151 156 30 65 30 187 0 252 -67 148 -241 224 -390
171z m271 -188 c23 -22 23 -216 0 -238 -23 -23 -305 -23 -328 0 -23 22 -23
216 0 238 23 23 305 23 328 0z"/>
<path d="M270 304 l0 -76 61 34 c33 19 61 39 61 44 1 9 -99 73 -114 74 -5 0
-8 -34 -8 -76z"/>
</g>
</symbol>
</svg>
<!-- vkontakte -->
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="vk" viewBox="0 0 60.000000 60.000000">
<g
transform="translate(0.000000,60.000000) scale(0.100000,-0.100000)"
stroke="none"
>
<path
d="M203 582 c-251 -90 -272 -432 -35 -549 81 -40 183 -40 264 0 107 53
163 144 163 267 0 85 -21 142 -74 203 -72 81 -213 117 -318 79z m171 -54 c25
-8 60 -31 91 -63 l50 -50 -42 -3 c-38 -3 -46 -8 -78 -54 -21 -28 -40 -47 -45
-42 -5 5 -10 29 -12 54 l-3 45 -42 3 c-33 2 -43 0 -43 -12 0 -8 5 -18 10 -21
15 -9 12 -51 -4 -64 -11 -9 -18 -6 -35 15 -12 15 -21 30 -21 35 0 19 -34 39
-66 39 -19 0 -34 -3 -34 -6 0 -13 51 -107 76 -140 36 -46 72 -71 116 -79 34
-6 38 -5 53 25 l17 32 21 -20 c31 -28 62 -42 91 -42 37 0 32 -13 -18 -57 -101
-89 -225 -84 -321 12 -102 101 -102 229 0 330 70 71 146 91 239 63z m166 -224
c0 -23 -5 -55 -11 -72 l-11 -32 -34 41 -34 41 26 41 c14 23 28 51 32 62 5 18
7 17 18 -10 7 -17 13 -48 14 -71z"
/>
</g>
</symbol>
</svg>
<svg>
<!-- telegram -->
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" id="telegram" viewBox="0 0 1500.33 1500.33" style="enable-background:new 0 0 1500.33 1500.33;" xml:space="preserve">
<style type="text/css">
.st0{fill:#E5E5E5;}
.st1{fill:#B7B7B7;}
.st2{fill:#FFFFFF;}
</style>
<circle cx="750.16" cy="750.16" r="750.16"/>
<g>
<image style="z-index:9999" width="880" height="746" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA3AAAALqCAYAAAB0YLZGAAAACXBIWXMAAAsSAAALEgHS3X78AAAA
превышено максимальное количество символов
wAEAAAAAPKbQIWyAwAEAAAAAPJjYIWoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv8//CTAA
hStRLvE/KpkAAAAASUVORK5CYII=" transform="matrix(1 0 0 1 280.1628 392.1628)">
</image>
</g>
</symbol>
</svg>Ответы (2 шт):
Автор решения: Alexandr_TT
→ Ссылка
- Первая причина состоит в том, что примененный вами фильтр не рабочий, покажу ниже на работающем примере.
- Использованная иконка, например instagram расположена вплотную к краям холста, поэтому тень не видна при работающем фильтре, так как всё, что находится за границами холста SVG обрезается.
Скачать профессиональные иконки можно здесь
Но бесплатный вариант содержит в path слишком много знаков после запятой
Оптимизировать код можно здесь Я выбрал один знак после запятой.
- Ещё проблема была в масштабировании размера иконки -
scale(0.100000,-0.100000)Фильтр как-то плохо работает при таком варианте. Размер иконки можно уменьшить с помощью увеличения viewBox -width="60" viewBox="0 0 550 550"
Мягкая тень
#instagram {
fill:#cf9f8f;
-webkit-transition: 0.5s all;
transition: 0.5s all;
}
svg:hover > use#u1{
filter:url(#dropshadow);
}
svg:hover > use#u1{
filter:url(#dropshadow);
fill:red;
}
<a href="https://instagram.com/" target="_blank">
<svg width="60" viewBox="0 0 550 550" xmlns="http://www.w3.org/2000/svg" >
<defs>
<filter id="dropshadow" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="25" dy="25" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="20" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<symbol id="instagram" >
<path d="M511 150.5a187 187 0 00-12-62.1A125 125 0 00469.5 43a126 126 0 00-45.3-29.5 187.5 187.5 0 00-62-11.9C334.6.3 325.9 0 256.4 0S178.3.3 151 1.5a187.1 187.1 0 00-62 11.9A124.9 124.9 0 0043.4 43 126 126 0 0014 88.3a187.6 187.6 0 00-11.8 62.1C.8 177.8.4 186.5.4 256S.8 334.2 2 361.5a187 187 0 0012 62.1A126.2 126.2 0 0043.4 469a126 126 0 0045.4 29.5 187.6 187.6 0 0062 11.9c27.3 1.2 36 1.5 105.6 1.5s78.2-.3 105.5-1.5a187 187 0 0062-11.9 131 131 0 0075-74.9 187.7 187.7 0 0011.9-62.1c1.1-27.3 1.5-36 1.5-105.5s-.2-78.2-1.4-105.5zm-46.1 209c-1.1 25-5.3 38.5-8.8 47.5a85 85 0 01-48.7 48.6c-9 3.5-22.5 7.7-47.5 8.8-27 1.2-35 1.5-103.3 1.5s-76.5-.3-103.5-1.5c-25-1.1-38.5-5.3-47.5-8.8a78.8 78.8 0 01-29.3-19.1A79.6 79.6 0 0157 407.1c-3.5-9-7.7-22.6-8.7-47.5-1.3-27-1.5-35.1-1.5-103.4s.2-76.5 1.5-103.4c1-25 5.2-38.5 8.7-47.5a77.8 77.8 0 0119.3-29.4c8.2-8.5 18.2-15 29.4-19.1 9-3.5 22.6-7.7 47.5-8.8 27-1.2 35-1.5 103.3-1.5 68.5 0 76.5.3 103.5 1.5 25 1.1 38.5 5.3 47.5 8.8a78.7 78.7 0 0129.3 19.1c8.5 8.3 15 18.3 19.2 29.4 3.5 9 7.7 22.6 8.8 47.5 1.2 27 1.5 35.1 1.5 103.4s-.3 76.3-1.5 103.3zm0 0"/>
<path d="M256.4 124.5a131.5 131.5 0 10.1 263 131.5 131.5 0 000-263zm0 216.8a85.3 85.3 0 110-170.6 85.3 85.3 0 010 170.6zm0 0M423.9 119.3a30.7 30.7 0 11-61.5 0 30.7 30.7 0 0161.5 0zm0 0"/>
</symbol>
<use id="u1" xlink:href="#instagram" />
</svg>
</a> Жёсткая тень
#instagram {
fill:#cf9f8f;
-webkit-transition: 0.5s all;
transition: 0.5s all;
}
svg:hover > use#u1{
filter:url(#dropshadow);
}
svg:hover > use#u1{
filter:url(#dropshadow);
fill:red;
}
<a href="https://instagram.com/" target="_blank">
<svg width="60" viewBox="0 0 550 550" xmlns="http://www.w3.org/2000/svg" >
<defs>
<filter id="dropshadow" x="0" y="0" width="200%" height="200%">
<feOffset result="offsetResult" in="SourceAlpha" dx="20" dy="25" />
<feGaussianBlur result="blurResult" in="offsetResult" stdDeviation="25" />
<feBlend in="SourceGraphic" in2="blurResult" mode="normal" />
</filter>
</defs>
<symbol id="instagram" >
<path d="M511 150.5a187 187 0 00-12-62.1A125 125 0 00469.5 43a126 126 0 00-45.3-29.5 187.5 187.5 0 00-62-11.9C334.6.3 325.9 0 256.4 0S178.3.3 151 1.5a187.1 187.1 0 00-62 11.9A124.9 124.9 0 0043.4 43 126 126 0 0014 88.3a187.6 187.6 0 00-11.8 62.1C.8 177.8.4 186.5.4 256S.8 334.2 2 361.5a187 187 0 0012 62.1A126.2 126.2 0 0043.4 469a126 126 0 0045.4 29.5 187.6 187.6 0 0062 11.9c27.3 1.2 36 1.5 105.6 1.5s78.2-.3 105.5-1.5a187 187 0 0062-11.9 131 131 0 0075-74.9 187.7 187.7 0 0011.9-62.1c1.1-27.3 1.5-36 1.5-105.5s-.2-78.2-1.4-105.5zm-46.1 209c-1.1 25-5.3 38.5-8.8 47.5a85 85 0 01-48.7 48.6c-9 3.5-22.5 7.7-47.5 8.8-27 1.2-35 1.5-103.3 1.5s-76.5-.3-103.5-1.5c-25-1.1-38.5-5.3-47.5-8.8a78.8 78.8 0 01-29.3-19.1A79.6 79.6 0 0157 407.1c-3.5-9-7.7-22.6-8.7-47.5-1.3-27-1.5-35.1-1.5-103.4s.2-76.5 1.5-103.4c1-25 5.2-38.5 8.7-47.5a77.8 77.8 0 0119.3-29.4c8.2-8.5 18.2-15 29.4-19.1 9-3.5 22.6-7.7 47.5-8.8 27-1.2 35-1.5 103.3-1.5 68.5 0 76.5.3 103.5 1.5 25 1.1 38.5 5.3 47.5 8.8a78.7 78.7 0 0129.3 19.1c8.5 8.3 15 18.3 19.2 29.4 3.5 9 7.7 22.6 8.8 47.5 1.2 27 1.5 35.1 1.5 103.4s-.3 76.3-1.5 103.3zm0 0"/>
<path d="M256.4 124.5a131.5 131.5 0 10.1 263 131.5 131.5 0 000-263zm0 216.8a85.3 85.3 0 110-170.6 85.3 85.3 0 010 170.6zm0 0M423.9 119.3a30.7 30.7 0 11-61.5 0 30.7 30.7 0 0161.5 0zm0 0"/>
</symbol>
<use id="u1" xlink:href="#instagram" />
</svg>
</a> Цветная тень с размытием
<style>
#instagram {
fill:#cf9f8f;
-webkit-transition: 0.5s all;
transition: 0.5s all;
}
svg:hover > use#u1{
filter:url(#dropshadow);
}
svg:hover > use#u1{
filter:url(#dropshadow);
fill:red;
}
<a href="https://instagram.com/" target="_blank">
<svg width="60" viewBox="0 0 550 550" xmlns="http://www.w3.org/2000/svg" >
<defs>
<filter id="dropshadow" height="200%" width="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="20" />
<feOffset in="blur" dx="10" dy="10" result="offsetBlur"/>
<feOffset dx="20" dy="20" result="offsetblur" />
<feFlood flood-color="red" flood-opacity="0.8" result="offsetColor"/>
<feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"/>
</filter>
</defs>
<symbol id="instagram" >
<path d="M511 150.5a187 187 0 00-12-62.1A125 125 0 00469.5 43a126 126 0 00-45.3-29.5 187.5 187.5 0 00-62-11.9C334.6.3 325.9 0 256.4 0S178.3.3 151 1.5a187.1 187.1 0 00-62 11.9A124.9 124.9 0 0043.4 43 126 126 0 0014 88.3a187.6 187.6 0 00-11.8 62.1C.8 177.8.4 186.5.4 256S.8 334.2 2 361.5a187 187 0 0012 62.1A126.2 126.2 0 0043.4 469a126 126 0 0045.4 29.5 187.6 187.6 0 0062 11.9c27.3 1.2 36 1.5 105.6 1.5s78.2-.3 105.5-1.5a187 187 0 0062-11.9 131 131 0 0075-74.9 187.7 187.7 0 0011.9-62.1c1.1-27.3 1.5-36 1.5-105.5s-.2-78.2-1.4-105.5zm-46.1 209c-1.1 25-5.3 38.5-8.8 47.5a85 85 0 01-48.7 48.6c-9 3.5-22.5 7.7-47.5 8.8-27 1.2-35 1.5-103.3 1.5s-76.5-.3-103.5-1.5c-25-1.1-38.5-5.3-47.5-8.8a78.8 78.8 0 01-29.3-19.1A79.6 79.6 0 0157 407.1c-3.5-9-7.7-22.6-8.7-47.5-1.3-27-1.5-35.1-1.5-103.4s.2-76.5 1.5-103.4c1-25 5.2-38.5 8.7-47.5a77.8 77.8 0 0119.3-29.4c8.2-8.5 18.2-15 29.4-19.1 9-3.5 22.6-7.7 47.5-8.8 27-1.2 35-1.5 103.3-1.5 68.5 0 76.5.3 103.5 1.5 25 1.1 38.5 5.3 47.5 8.8a78.7 78.7 0 0129.3 19.1c8.5 8.3 15 18.3 19.2 29.4 3.5 9 7.7 22.6 8.8 47.5 1.2 27 1.5 35.1 1.5 103.4s-.3 76.3-1.5 103.3zm0 0"/>
<path d="M256.4 124.5a131.5 131.5 0 10.1 263 131.5 131.5 0 000-263zm0 216.8a85.3 85.3 0 110-170.6 85.3 85.3 0 010 170.6zm0 0M423.9 119.3a30.7 30.7 0 11-61.5 0 30.7 30.7 0 0161.5 0zm0 0"/>
</symbol>
<use id="u1" xlink:href="#instagram" />
</svg>
</a>
Автор решения: Alexandr_TT
→ Ссылка
Комментарий @Alex
Есть ли какая-то возможность сделать плавный переход в задержкой в 0,5 секунд при наведении?
При использовании CSS трансформаций для фильтров SVG, как в прочем и для фильтров CSS, плавного перехода от начального состояния к конечному не получится. Происходит дискретный скачок.
Но можно попытаться сделать анимацию изменения параметров фильтров SVG внутри самого фильтра SVG.
- Например анимировать атрибуты смещения
dxиdyу фильтраfeOffset - Анимировать коэффициент размытия
stdDeviationу фильтраfeGaussianBlur
#instagram {
fill:#cf9f8f;
}
svg:hover > use#u1{
filter:url(#dropshadow);
}
svg:hover > use#u1{
filter:url(#dropshadow);
fill:red;
}
<a href="https://instagram.com/" target="_blank">
<svg id="svg1" width="60" viewBox="0 0 550 550" xmlns="http://www.w3.org/2000/svg" >
<defs>
<filter id="dropshadow" x="0" y="0" width="200%" height="200%">
<feOffset result="offsetResult" in="SourceAlpha" dx="1" dy="1" >
<!-- Анимация смещения тени -->
<animate attributeName="dx" begin="svg1.mouseover" dur="0.5s" values="1;15" fill="freeze" />
<animate attributeName="dy" begin="svg1.mouseover" dur="0.5s" values="1;15" fill="freeze" />
</feOffset>
<feGaussianBlur result="blurResult" in="offsetResult" stdDeviation="1" >
<!-- Анимация коэффициента размытия -->
<animate attributeName="stdDeviation" begin="svg1.mouseover" dur="0.5s" values="1;25" fill="freeze" />
</feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurResult" mode="normal" />
</filter>
</defs>
<symbol id="instagram" >
<path d="M511 150.5a187 187 0 00-12-62.1A125 125 0 00469.5 43a126 126 0 00-45.3-29.5 187.5 187.5 0 00-62-11.9C334.6.3 325.9 0 256.4 0S178.3.3 151 1.5a187.1 187.1 0 00-62 11.9A124.9 124.9 0 0043.4 43 126 126 0 0014 88.3a187.6 187.6 0 00-11.8 62.1C.8 177.8.4 186.5.4 256S.8 334.2 2 361.5a187 187 0 0012 62.1A126.2 126.2 0 0043.4 469a126 126 0 0045.4 29.5 187.6 187.6 0 0062 11.9c27.3 1.2 36 1.5 105.6 1.5s78.2-.3 105.5-1.5a187 187 0 0062-11.9 131 131 0 0075-74.9 187.7 187.7 0 0011.9-62.1c1.1-27.3 1.5-36 1.5-105.5s-.2-78.2-1.4-105.5zm-46.1 209c-1.1 25-5.3 38.5-8.8 47.5a85 85 0 01-48.7 48.6c-9 3.5-22.5 7.7-47.5 8.8-27 1.2-35 1.5-103.3 1.5s-76.5-.3-103.5-1.5c-25-1.1-38.5-5.3-47.5-8.8a78.8 78.8 0 01-29.3-19.1A79.6 79.6 0 0157 407.1c-3.5-9-7.7-22.6-8.7-47.5-1.3-27-1.5-35.1-1.5-103.4s.2-76.5 1.5-103.4c1-25 5.2-38.5 8.7-47.5a77.8 77.8 0 0119.3-29.4c8.2-8.5 18.2-15 29.4-19.1 9-3.5 22.6-7.7 47.5-8.8 27-1.2 35-1.5 103.3-1.5 68.5 0 76.5.3 103.5 1.5 25 1.1 38.5 5.3 47.5 8.8a78.7 78.7 0 0129.3 19.1c8.5 8.3 15 18.3 19.2 29.4 3.5 9 7.7 22.6 8.8 47.5 1.2 27 1.5 35.1 1.5 103.4s-.3 76.3-1.5 103.3zm0 0"/>
<path d="M256.4 124.5a131.5 131.5 0 10.1 263 131.5 131.5 0 000-263zm0 216.8a85.3 85.3 0 110-170.6 85.3 85.3 0 010 170.6zm0 0M423.9 119.3a30.7 30.7 0 11-61.5 0 30.7 30.7 0 0161.5 0zm0 0"/>
</symbol>
<use id="u1" xlink:href="#instagram" />
</svg>
</a> Но как-то сложно это всё получается
Обдумайте другие варианты выделения соц. иконок при наведении
#1. Например использование иконок font-awesome
.footer {
background: #061D25;
padding: 10px 0;
}
.footer a {
color: #70726F;
font-size: 20px;
padding: 10px;
border-right: 1px solid #70726F;
transition: all .5s ease;
}
.footer a:first-child {
border-left: 1px solid #70726F;
}
.footer a:hover {
color: white;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="footer">
<div class="container text-center">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
<a href="#"><i class="fa fa-skype"></i></a>
</div>
</footer>#2. Использование SVG иконок, но с анимацией изменения цвета при наведении
svg path {
fill:inherit;
stroke:inherit;
stroke-width:inherit;
}
.icon-youtube{
transition: all .8s ease;
}
.icon-youtube:hover {
fill:red;
}<svg class="icon-youtube" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
<path d="M4.652 0h1.44l.988 3.702.916-3.702h1.454l-1.665 5.505v3.757h-1.431v-3.757l-1.702-5.505zm6.594 2.373c-1.119 0-1.861.74-1.861 1.835v3.349c0 1.204.629 1.831 1.861 1.831 1.022 0 1.826-.683 1.826-1.831v-3.349c0-1.069-.797-1.835-1.826-1.835zm.531 5.127c0 .372-.19.646-.532.646-.351 0-.554-.287-.554-.646v-3.179c0-.374.172-.651.529-.651.39 0 .557.269.557.651v3.179zm4.729-5.07v5.186c-.155.194-.5.512-.747.512-.271 0-.338-.186-.338-.46v-5.238h-1.27v5.71c0 .675.206 1.22.887 1.22.384 0 .918-.2 1.468-.853v.754h1.27v-6.831h-1.27zm2.203 13.858c-.448 0-.541.315-.541.763v.659h1.069v-.66c.001-.44-.092-.762-.528-.762zm-4.703.04c-.084.043-.167.109-.25.198v4.055c.099.106.194.182.287.229.197.1.485.107.619-.067.07-.092.105-.241.105-.449v-3.359c0-.22-.043-.386-.129-.5-.147-.193-.42-.214-.632-.107zm4.827-5.195c-2.604-.177-11.066-.177-13.666 0-2.814.192-3.146 1.892-3.167 6.367.021 4.467.35 6.175 3.167 6.367 2.6.177 11.062.177 13.666 0 2.814-.192 3.146-1.893 3.167-6.367-.021-4.467-.35-6.175-3.167-6.367zm-12.324 10.686h-1.363v-7.54h-1.41v-1.28h4.182v1.28h-1.41v7.54zm4.846 0h-1.21v-.718c-.223.265-.455.467-.696.605-.652.374-1.547.365-1.547-.955v-5.438h1.209v4.988c0 .262.063.438.322.438.236 0 .564-.303.711-.487v-4.939h1.21v6.506zm4.657-1.348c0 .805-.301 1.431-1.106 1.431-.443 0-.812-.162-1.149-.583v.5h-1.221v-8.82h1.221v2.84c.273-.333.644-.608 1.076-.608.886 0 1.18.749 1.18 1.631v3.609zm4.471-1.752h-2.314v1.228c0 .488.042.91.528.91.511 0 .541-.344.541-.91v-.452h1.245v.489c0 1.253-.538 2.013-1.813 2.013-1.155 0-1.746-.842-1.746-2.013v-2.921c0-1.129.746-1.914 1.837-1.914 1.161 0 1.721.738 1.721 1.914v1.656z"/>
</svg>
<svg class="icon-youtube" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-3 7h-1.924c-.615 0-1.076.252-1.076.889v1.111h3l-.238 3h-2.762v8h-3v-8h-2v-3h2v-1.923c0-2.022 1.064-3.077 3.461-3.077h2.539v3z"/></svg>