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,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
/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,iVBORw0KGgoAAAANSUhEUgAAAGcAAABnCAYAAAAdQVz5AAAACXBIWXMAAAsSAAALEgHS3X78AAAA
GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABthJREFUeNrsneuO6zAIhCHN+z9y
2F9HinxsGDC+dNeWqt7T1F8HxthJiU477bTTTjvttNNOO+200047bVLjX7QPcuB8z2fKgbO/SuXA
2Tt0fiUk3mTbPLHj5S/D4cU/DPktkHjy9jh5f2Tw878CTrTTeZJqvhISD94GTwDlASLfBIgnguFO
eFEA8q2AeAEYTgIkyfe3A5QNB4XCAZV5FIPc3h4QLwTDHXAiMFBg2wDixPegMLygvGFNFABfBYgH
qIYdgDRw5XvRUIZebw/oHgwGuY7kJXk9Fu08Kd7f2havAsSdr/eCad3W1MOBUCbKbY+aliqIk1RT
QmqB8YJCck4LTBTUNoDuZLAtJbXgRAFJkYukEn6QcPR+33YhjhNVo6mCnY8jcKwwJoqKECVFy0DL
lYPaafRSU5P2OVYoe//Ka8/V1McOBU5R0N2pLu6EgihIUw+iloh7Y8AV8mgV3cmqsZ4rL5cDDivj
GuvyALmLDKs+PQ9lGAIGQJAB5XLkHqmox4JyAaAIUM1UQHfSdhiEVIKoQWrlH3Kq5mlAuRy5aOlg
9XaGMOS+5cpKMDVYmno0M/AU1vqpgHoC+WcJoAy3xoaSEDAXEN4Q5XABqHytB9JyQNlhDVVNCeQy
8k/NHZWAngogMiBtDeimMa01MK3lGE092oC0ppp/Hc+vji/hvMFcYJhbUk3ILt+QUVfTVHQZ9rpl
p8uc8wZTg1QDhdrtqYDuThjegie9QJSXWoizLHUr53ABpoTzvJwhEuZ6AA1RDrqEicmebENNAqIe
ciiHGqAiYS4KKAxtVM7pKeUg6rHcmgalph4PIAqYhBCgewAMy163KgaXoR5tvFMqh8FEHwFEFJ+i
2EY5WlL32GxP3qkpxwqPPYA8SnHDGx3WepzcBXSuFLlDKi4NyZvP6zMfoK7HHRZ7CRxrkgxdY8BA
UbQW2rhhCKxfvgbpKqx4bZrAA8EF7J6sGHIC8hqD8tfNQAmIFEjIj65lEqaOc0ZAig5aSekQATq/
9bwU1XErxLFhErrUMxuOVTy1XF6pnrJDLgOOtqCwBkVTq+bWtqut1aZ50c7x2O7ysffnSgCOvKC8
vweTb1WQZOSZFcrpOWZGW07V+vJXkdxLZUhxmxqvKR1cyxSQEWrTlaMpIPIeCYBBDIVU7tfGLtQA
cxXXDIS41nS25/uYr7sSVIDUvFqrKlv3BQiBHgNhTZOjFXFrhau3TpkGRwwIFjxrAaAFzGswaqUh
a4CLLHREFj2mHIh8dbwXySMt5SCAUOjRFabRNXVE9hKuFEifhMGjlqh7LxfQOUgnCPmOULDCtzhC
/BLlEBi+PJfHuB81Fd712lYumXI+n08glpMhaU1BlzOmWxN7BDolodihIYhhkV2Ug+aZljNDFPMo
qtEe96oKrfd5XFlvKWvKILQctTPpU8q1uf9WdfmqjD0ELIamdyDhizumzudoo2WudBIXI20NEGJV
L4dbRMdOXnBDDcHthIDcrxUHy0mxcjRfUwsb4fgh/+ocL6Slh7rfA8KZph6i/xeWt4BYR7ZdldAW
cY3RECgdfTMFTm1ySVMPUfswjdqSJrQY2no9aiaQ8pGQ7xDEaVMGSCizHF1LOUT41DI1ipQMwrHc
nla5yA515nY+jo15zm2Djuqj9lScg1+q2PXHAe1RTMbSQWjP2MAqTGZWIEiB0RpDPQ1QqLKGmocs
OIgi0MIhGiqt0bsASolCEWDgvRyOpR4EFCXkr0gtr6aeJwBG22eZCScCCHFcRPqBuRoYzXE9QEH1
AfKRBWnI+OgTfF9WyPIunkBUQoBCtOc9NTz0vAeh/JQFx3JvPfUrDxh0KsIyCVHVLM050fBmqciC
aXUMknsQ+4yAslSTZg5GwdEMQm8VmMAOI2pPRTyG1UYUNLxS8OmEOwIQGYVMUsoqSN7pCYGSoBqZ
BWc0IEs1FqQoILQeN7S+lgEnG1C02oue2aP3QsaYJ80UZMGJAvKA8ax9Fqd6iPwVAgmoRnaCYwHy
nnldAqrxdjj6mPb5Qzt0BSDPahxr9T87VEagqSDqO4GrrIbjBYTAsWBE4CCAiBafWXfU4risU+pH
zuTOgTCJgkJCWdoJW1f8oV7vicMzLHrkNPtTwYyGY22fA4ryQuGg2/M+lg5mBpwMFUVue9XjgYKC
+Ro4HkAeAFn/WtUDYliF+kNzW9af7/W2jP9623aybaRaeQK43lH9lFWiK/83Ovu/RXkwJKTjt64Q
jPh8nrT/PWqQVZ2zC6TI/nJHJy7/j+td4GR1/kj1TIOyK5ys/eKBnSrf0gl/aR/lr37xXfdXzq9y
n+8gdNppp5122mmnnXbaaad9e/sRYABz1DpB+Wgq9QAAAABJRU5ErkJggg==" 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>
sprite-vk.svg
в сравнении с кодом других иконок, которые не пропадают, напримерsprite-youtube.svg
Добавьте их в вопрос.