3

SVG вставляю через спрайты.

  • так выглядит в opera Иконки в opera
  • так выглядит в iOS Safari после нажатия Иконка
пропала в 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,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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>

9
  • Если пропадает в iOS иконка VK, то интересно посмотреть её код sprite-vk.svg в сравнении с кодом других иконок, которые не пропадают, например sprite-youtube.svg Добавьте их в вопрос. 8 янв 2021 в 17:56
  • Пропадают все иконки, не только VK. Проверил так же на Macbook Safari, там при hover иконки пропадают
    – Alex
    9 янв 2021 в 8:19
  • Фильтр SVG с какой целью используете? Для тени или.. 9 янв 2021 в 8:20
  • Да, для тени. Спрайты добавил в текст вопроса
    – Alex
    9 янв 2021 в 8:29
  • Давайте я попробую добавить свои варианты фильтров для тени, а вы проверите в IOS на работоспособность 9 янв 2021 в 8:35

2 ответа 2

3
  1. Первая причина состоит в том, что примененный вами фильтр не рабочий, покажу ниже на работающем примере.
  2. Использованная иконка, например instagram расположена вплотную к краям холста, поэтому тень не видна при работающем фильтре, так как всё, что находится за границами холста SVG обрезается.

введите сюда описание изображения

Скачать профессиональные иконки можно здесь

Но бесплатный вариант содержит в path слишком много знаков после запятой

Оптимизировать код можно здесь Я выбрал один знак после запятой.

  1. Ещё проблема была в масштабировании размера иконки - 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> 
      
    

2
  • Спасибо большое, получилось! Есть ли какая-то возможность сделать плавный переход в задержкой в 0,5 секунд при наведении?
    – Alex
    17 янв 2021 в 8:32
  • @Alex Рад был помочь. Насчет задержки, попробовал, не получается. По всей видимости применение фильтра имеет дискретный характер, не анимируется, так что transition и animation с delay="0.5s" бесполезны. Можно попробовать запихнуть анимацию внутрь SVG фильтра/ Попробую и если получится добавлю в ответ 17 янв 2021 в 11:05
2

Комментарий @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>

2
  • @Alex Посмотрите этот вариант с задержкой 17 янв 2021 в 19:14
  • 1
    Cпасибо! Все супер объяснили, все стало понятно!
    – Alex
    4 апр 2021 в 11:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.