1

У меня есть набор иконок SVG, к которым я пытаюсь применить обратную анимацию с использованием JavaScript.

Код ниже добавляет или отключает классы с помощью событий mouseover или mouseout соответственно .

Хотя анимация не применяется. Я считаю, что это переопределение первых двух стилей в CSS. Кто-нибудь подскажет мне, как правильно подойти к этому?

var a = document.querySelectorAll('a');

function on(e) {
  var e = e.target.parentNode;
  e.classList.remove('off')
  e.classList.add('on');
}

function off(e) {
  var e = e.target.parentNode;
  e.classList.remove('on')
  e.classList.add('off');
}
a.forEach(function(el, _) {
  el.addEventListener('mouseover', on);
  el.addEventListener('mouseout', off);
});
a path {
  fill:#444142;
  stroke:none;
  pointer-events:all;
}
a circle {
  fill:none;
  stroke:#444142;
  pointer-events:all;
  stroke-width: 1;
}

.fb__icon.on path { animation:afbPO 0.15s ease-in forwards; }
.fb__icon.on circle { animation:afbCO 0.15s ease-in forwards; }
.t__icon.on path { animation:atPO 0.15s ease-in forwards; }
.t__icon.on circle { animation:atCO 0.15s ease-in forwards; }
.g__icon.on path { animation:agPO 0.15s ease-in forwards; }
.g__icon.on circle { animation:agCO 0.15s ease-in forwards; }
.yt__icon.on path { animation:aytPO 0.15s ease-in forwards; }
.yt__icon.on circle { animation:aytCO 0.15s ease-in forwards; }

.off path { animation:Po 0.5s ease-in forwards; }
.off circle { animation:Co 0.5s ease-in forwards; }

@keyframes afbPO { 100% { fill:#3c589a; } }
@keyframes afbCO { 100% { stroke:#3c589a; } }
@keyframes atPO { 100% { fill:#68acd2; } }
@keyframes atCO { 100% { stroke:#68acd2; } }
@keyframes agPO { 100% { fill:#d54133; } }
@keyframes agCO { 100% { stroke:#d54133; } }
@keyframes aytPO { 100% { fill:#e72c2e; } }
@keyframes aytCO { 100% { stroke:#e72c2e; } }

@keyframes Po { 100% { fill:#444142; } }
@keyframes Co { 100% { stroke:#444142; } }
<svg class="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" viewBox="0 0 136 32">
  <a class="fb__icon off" xlink:href="#">
    <circle cx="16" cy="16" r="15" />
    <path d="m 17.222624,12.7308 0,-1.3112 c 0,-0.6288 0.4164,-0.7793 0.717803,-0.7793 0.292194,0 1.833815,0 1.833815,0 l 0,-2.7998 -2.524994,0 c -2.808334,0 -3.437377,2.0731 -3.437377,3.4198 l 0,1.4705 -1.630252,0 0,3.2694 1.647765,0 c 0,3.7119 0,8.1684 0,8.1684 l 3.269292,0 c 0,0 0,-4.5185 0,-8.1684 l 2.418591,0 0.106532,-1.2848 0.194742,-1.9846 -2.595917,0" />
  </a>
  <a class="t__icon off" xlink:href="#">
    <circle cx="50" cy="16" r="15" />
    <path d="m 58.168343,11.0178 c -0.593885,0.2571 -1.240115,0.4341 -1.92221,0.5226 0.699543,-0.416 1.230744,-1.054 1.479543,-1.8335 -0.646876,0.3809 -1.373239,0.6555 -2.135143,0.806 -0.603256,-0.6464 -1.479543,-1.045 -2.454057,-1.045 -1.842724,0 -3.349086,1.4792 -3.349086,3.2946 0,0.2658 0.04459,0.5139 0.09758,0.7533 -2.79042,-0.1331 -5.262571,-1.444 -6.9104567,-3.4458 -0.2833717,0.4962 -0.4604386,1.0544 -0.4604386,1.6565 0,1.1513 0.602286,2.1611 1.4879433,2.7457 -0.5489716,-0.01 -1.0630473,-0.1595 -1.5144387,-0.4076 0,0.018 0,0.027 0,0.044 0,0.4251 0.079809,0.815 0.2300577,1.1868 0.4077709,1.0366 1.338019,1.8158 2.463427,2.0374 -0.293065,0.08 -0.576436,0.1237 -0.886303,0.1237 -0.21261,0 -0.4252196,-0.026 -0.6294282,-0.071 0.4345892,1.3109 1.6656572,2.2674 3.1280742,2.3029 -1.152227,0.8857 -2.58718,1.4084 -4.1552562,1.4084 -0.2749707,0 -0.5315239,-0.018 -0.8061715,-0.045 1.4882669,0.9303 3.2511817,1.4792 5.1384947,1.4792 5.235753,0 8.469486,-3.6225 9.310554,-7.3867 0.151218,-0.6729 0.221657,-1.3373 0.221657,-1.9928 0,-0.1417 0,-0.292 0,-0.4251 0.646876,-0.4693 1.22299,-1.054 1.665657,-1.7094 l 0,0" />
  </a>
  <a class="g__icon off" xlink:href="#">
    <circle cx="84" cy="16" r="15" />
    <path d="m 92.98962,15.0525 c -0.105982,0 -0.229735,0 -0.354134,0 0,-0.027 0,-0.062 0,-0.072 0,-0.097 0,-0.1767 0,-0.2478 0,-0.452 0.009,-0.9037 0,-1.3645 0,-0.071 -0.08853,-0.2036 -0.124399,-0.2036 -0.406802,-0.018 -0.82362,-0.018 -1.25724,-0.018 0,0.5493 0,1.0634 0,1.5859 0,0.098 0,0.2038 0,0.3008 -0.647199,0 -1.249162,0 -1.905408,0 0,0.1509 0,0.2488 0,0.346 0.01809,0.3367 0.02714,0.6821 0.05331,1.0185 0.327961,0.018 0.655923,0.035 1.000687,0.035 0.275616,0.01 0.558342,0 0.859485,0 0,0.6556 0,1.2583 0,1.8606 0.470132,-0.01 0.903752,0 1.373561,0 0,-0.6204 0,-1.2227 0,-1.8606 0.637829,0 1.240115,0 1.860172,0 0,-0.3631 0,-0.6998 0,-1.054 0,-0.1153 0,-0.2216 0,-0.3276 -0.495658,0 -1.000686,0 -1.506038,0 l 0,0 z m -5.359829,-0.1687 c -1.178076,0.018 -2.356476,0.018 -3.534553,0.018 -0.336362,0 -0.682095,-0.018 -1.01038,0 -0.07044,0 -0.176744,0.08 -0.176744,0.1238 -0.009,0.6827 -0.009,1.3645 -0.009,2.0734 0.96579,0 1.913486,0 2.879276,0 -0.02649,0.1416 -0.05299,0.2479 -0.09726,0.3455 -0.43459,1.3112 -1.790056,1.9581 -3.251828,1.719 -1.807181,-0.3015 -2.9232198,-1.9672 -2.5955814,-3.7744 0.035543,-0.2569 0.1240761,-0.505 0.2126094,-0.7354 0.602286,-1.3112 2.081829,-2.1087 3.543924,-1.7807 0.522476,0.1153 0.974837,0.3544 1.35482,0.6999 0.531847,-0.5316 1.036876,-1.0366 1.586171,-1.5856 -0.03554,-0.027 -0.09726,-0.071 -0.1328,-0.1153 -1.275658,-1.0721 -2.737752,-1.4709 -4.376591,-1.1962 -2.3658465,0.3809 -4.0660767,2.2414 -4.4292578,4.4118 -0.1683428,0.9216 -0.097581,1.9051 0.2659235,2.8616 0.9037522,2.2951 3.2153153,3.7032 5.6961913,3.4289 1.213619,-0.1331 2.294761,-0.5671 3.127428,-1.4621 1.248516,-1.3287 1.576155,-2.9233 1.372915,-4.6865 -0.03554,-0.2921 -0.150248,-0.3454 -0.425219,-0.3454 l 0,0" />
  </a>
  <a class="yt__icon off" xlink:href="#">
    <circle cx="118" cy="16" r="15" />
    <path d="m 120.728382,15.8186 -4.420857,2.382 0,-4.7824 2.002342,1.0896 2.418515,1.3108 z m 5.280019,-3.2241 c 0,0 -0.167697,-1.1781 -0.6556,-1.6917 -0.619734,-0.6732 -1.319924,-0.6819 -1.629791,-0.7265 -2.285714,-0.1683 -5.714286,-0.1683 -5.714286,-0.1683 l -0.01809,0 c 0,0 -3.419201,0 -5.705562,0.1683 -0.3273153,0.045 -1.0184579,0.053 -1.6385152,0.7265 -0.4875803,0.5136 -0.6552769,1.6917 -0.6552769,1.6917 0,0 -0.1689891,1.3816 -0.1689891,2.7454 l 0,1.3021 c 0,1.3816 0.1689891,2.7457 0.1689891,2.7457 0,0 0.1676966,1.1781 0.6552769,1.7005 0.6200573,0.6819 1.4355992,0.6557 1.8075042,0.7261 1.302153,0.1331 5.554667,0.1773 5.554667,0.1773 0,0 3.428572,-0.018 5.714286,-0.1773 0.309867,-0.044 1.010057,-0.044 1.629791,-0.7261 0.487903,-0.5224 0.6556,-1.7005 0.6556,-1.7005 0,0 0.159296,-1.3641 0.159296,-2.7457 l 0,-1.3021 c 0,-1.3638 -0.159296,-2.7454 -0.159296,-2.7454 l 0,0" />
  </a>
</svg>

1

1 ответ 1

1

Вы можете упростить все это, используя простой transition и hover: CSS:

a path {
  fill:#444142;
  stroke:none;
  pointer-events:all;
  transition:0.5s;
}
a circle {
  fill:none;
  stroke:#444142;
  pointer-events:all;
  stroke-width: 1;
  transition:0.5s;
}


.fb__icon:hover path{ fill:#3c589a; } 
.fb__icon:hover circle { stroke:#3c589a; } 
.t__icon:hover path { fill:#68acd2; } 
.t__icon:hover circle{ stroke:#68acd2; } 
.g__icon:hover path{ fill:#d54133; } 
.g__icon:hover circle{ stroke:#d54133; } 
.yt__icon:hover path { fill:#e72c2e; } 
.yt__icon:hover circle{ stroke:#e72c2e; }
<svg class="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" viewBox="0 0 136 32">
  <a class="fb__icon off" xlink:href="#">
    <circle cx="16" cy="16" r="15" />
    <path d="m 17.222624,12.7308 0,-1.3112 c 0,-0.6288 0.4164,-0.7793 0.717803,-0.7793 0.292194,0 1.833815,0 1.833815,0 l 0,-2.7998 -2.524994,0 c -2.808334,0 -3.437377,2.0731 -3.437377,3.4198 l 0,1.4705 -1.630252,0 0,3.2694 1.647765,0 c 0,3.7119 0,8.1684 0,8.1684 l 3.269292,0 c 0,0 0,-4.5185 0,-8.1684 l 2.418591,0 0.106532,-1.2848 0.194742,-1.9846 -2.595917,0" />
  </a>
  <a class="t__icon off" xlink:href="#">
    <circle cx="50" cy="16" r="15" />
    <path d="m 58.168343,11.0178 c -0.593885,0.2571 -1.240115,0.4341 -1.92221,0.5226 0.699543,-0.416 1.230744,-1.054 1.479543,-1.8335 -0.646876,0.3809 -1.373239,0.6555 -2.135143,0.806 -0.603256,-0.6464 -1.479543,-1.045 -2.454057,-1.045 -1.842724,0 -3.349086,1.4792 -3.349086,3.2946 0,0.2658 0.04459,0.5139 0.09758,0.7533 -2.79042,-0.1331 -5.262571,-1.444 -6.9104567,-3.4458 -0.2833717,0.4962 -0.4604386,1.0544 -0.4604386,1.6565 0,1.1513 0.602286,2.1611 1.4879433,2.7457 -0.5489716,-0.01 -1.0630473,-0.1595 -1.5144387,-0.4076 0,0.018 0,0.027 0,0.044 0,0.4251 0.079809,0.815 0.2300577,1.1868 0.4077709,1.0366 1.338019,1.8158 2.463427,2.0374 -0.293065,0.08 -0.576436,0.1237 -0.886303,0.1237 -0.21261,0 -0.4252196,-0.026 -0.6294282,-0.071 0.4345892,1.3109 1.6656572,2.2674 3.1280742,2.3029 -1.152227,0.8857 -2.58718,1.4084 -4.1552562,1.4084 -0.2749707,0 -0.5315239,-0.018 -0.8061715,-0.045 1.4882669,0.9303 3.2511817,1.4792 5.1384947,1.4792 5.235753,0 8.469486,-3.6225 9.310554,-7.3867 0.151218,-0.6729 0.221657,-1.3373 0.221657,-1.9928 0,-0.1417 0,-0.292 0,-0.4251 0.646876,-0.4693 1.22299,-1.054 1.665657,-1.7094 l 0,0" />
  </a>
  <a class="g__icon off" xlink:href="#">
    <circle cx="84" cy="16" r="15" />
    <path d="m 92.98962,15.0525 c -0.105982,0 -0.229735,0 -0.354134,0 0,-0.027 0,-0.062 0,-0.072 0,-0.097 0,-0.1767 0,-0.2478 0,-0.452 0.009,-0.9037 0,-1.3645 0,-0.071 -0.08853,-0.2036 -0.124399,-0.2036 -0.406802,-0.018 -0.82362,-0.018 -1.25724,-0.018 0,0.5493 0,1.0634 0,1.5859 0,0.098 0,0.2038 0,0.3008 -0.647199,0 -1.249162,0 -1.905408,0 0,0.1509 0,0.2488 0,0.346 0.01809,0.3367 0.02714,0.6821 0.05331,1.0185 0.327961,0.018 0.655923,0.035 1.000687,0.035 0.275616,0.01 0.558342,0 0.859485,0 0,0.6556 0,1.2583 0,1.8606 0.470132,-0.01 0.903752,0 1.373561,0 0,-0.6204 0,-1.2227 0,-1.8606 0.637829,0 1.240115,0 1.860172,0 0,-0.3631 0,-0.6998 0,-1.054 0,-0.1153 0,-0.2216 0,-0.3276 -0.495658,0 -1.000686,0 -1.506038,0 l 0,0 z m -5.359829,-0.1687 c -1.178076,0.018 -2.356476,0.018 -3.534553,0.018 -0.336362,0 -0.682095,-0.018 -1.01038,0 -0.07044,0 -0.176744,0.08 -0.176744,0.1238 -0.009,0.6827 -0.009,1.3645 -0.009,2.0734 0.96579,0 1.913486,0 2.879276,0 -0.02649,0.1416 -0.05299,0.2479 -0.09726,0.3455 -0.43459,1.3112 -1.790056,1.9581 -3.251828,1.719 -1.807181,-0.3015 -2.9232198,-1.9672 -2.5955814,-3.7744 0.035543,-0.2569 0.1240761,-0.505 0.2126094,-0.7354 0.602286,-1.3112 2.081829,-2.1087 3.543924,-1.7807 0.522476,0.1153 0.974837,0.3544 1.35482,0.6999 0.531847,-0.5316 1.036876,-1.0366 1.586171,-1.5856 -0.03554,-0.027 -0.09726,-0.071 -0.1328,-0.1153 -1.275658,-1.0721 -2.737752,-1.4709 -4.376591,-1.1962 -2.3658465,0.3809 -4.0660767,2.2414 -4.4292578,4.4118 -0.1683428,0.9216 -0.097581,1.9051 0.2659235,2.8616 0.9037522,2.2951 3.2153153,3.7032 5.6961913,3.4289 1.213619,-0.1331 2.294761,-0.5671 3.127428,-1.4621 1.248516,-1.3287 1.576155,-2.9233 1.372915,-4.6865 -0.03554,-0.2921 -0.150248,-0.3454 -0.425219,-0.3454 l 0,0" />
  </a>
  <a class="yt__icon off" xlink:href="#">
    <circle cx="118" cy="16" r="15" />
    <path d="m 120.728382,15.8186 -4.420857,2.382 0,-4.7824 2.002342,1.0896 2.418515,1.3108 z m 5.280019,-3.2241 c 0,0 -0.167697,-1.1781 -0.6556,-1.6917 -0.619734,-0.6732 -1.319924,-0.6819 -1.629791,-0.7265 -2.285714,-0.1683 -5.714286,-0.1683 -5.714286,-0.1683 l -0.01809,0 c 0,0 -3.419201,0 -5.705562,0.1683 -0.3273153,0.045 -1.0184579,0.053 -1.6385152,0.7265 -0.4875803,0.5136 -0.6552769,1.6917 -0.6552769,1.6917 0,0 -0.1689891,1.3816 -0.1689891,2.7454 l 0,1.3021 c 0,1.3816 0.1689891,2.7457 0.1689891,2.7457 0,0 0.1676966,1.1781 0.6552769,1.7005 0.6200573,0.6819 1.4355992,0.6557 1.8075042,0.7261 1.302153,0.1331 5.554667,0.1773 5.554667,0.1773 0,0 3.428572,-0.018 5.714286,-0.1773 0.309867,-0.044 1.010057,-0.044 1.629791,-0.7261 0.487903,-0.5224 0.6556,-1.7005 0.6556,-1.7005 0,0 0.159296,-1.3641 0.159296,-2.7457 l 0,-1.3021 c 0,-1.3638 -0.159296,-2.7454 -0.159296,-2.7454 l 0,0" />
  </a>
</svg>

Вы можете даже больше упростить, используя переменные CSS:

a path {
  fill:var(--c,#444142);
  stroke:none;
  pointer-events:all;
  transition:0.5s;
}
a circle {
  fill:none;
  stroke:var(--c,#444142);
  pointer-events:all;
  stroke-width: 1;
  transition:0.5s;
}


.fb__icon:hover { --c:#3c589a; } 
.t__icon:hover  { --c:#68acd2; }  
.g__icon:hover { --c:#d54133; } 
.yt__icon:hover { --c:#e72c2e; } 
<svg class="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" viewBox="0 0 136 32">
  <a class="fb__icon off" xlink:href="#">
    <circle cx="16" cy="16" r="15" />
    <path d="m 17.222624,12.7308 0,-1.3112 c 0,-0.6288 0.4164,-0.7793 0.717803,-0.7793 0.292194,0 1.833815,0 1.833815,0 l 0,-2.7998 -2.524994,0 c -2.808334,0 -3.437377,2.0731 -3.437377,3.4198 l 0,1.4705 -1.630252,0 0,3.2694 1.647765,0 c 0,3.7119 0,8.1684 0,8.1684 l 3.269292,0 c 0,0 0,-4.5185 0,-8.1684 l 2.418591,0 0.106532,-1.2848 0.194742,-1.9846 -2.595917,0" />
  </a>
  <a class="t__icon off" xlink:href="#">
    <circle cx="50" cy="16" r="15" />
    <path d="m 58.168343,11.0178 c -0.593885,0.2571 -1.240115,0.4341 -1.92221,0.5226 0.699543,-0.416 1.230744,-1.054 1.479543,-1.8335 -0.646876,0.3809 -1.373239,0.6555 -2.135143,0.806 -0.603256,-0.6464 -1.479543,-1.045 -2.454057,-1.045 -1.842724,0 -3.349086,1.4792 -3.349086,3.2946 0,0.2658 0.04459,0.5139 0.09758,0.7533 -2.79042,-0.1331 -5.262571,-1.444 -6.9104567,-3.4458 -0.2833717,0.4962 -0.4604386,1.0544 -0.4604386,1.6565 0,1.1513 0.602286,2.1611 1.4879433,2.7457 -0.5489716,-0.01 -1.0630473,-0.1595 -1.5144387,-0.4076 0,0.018 0,0.027 0,0.044 0,0.4251 0.079809,0.815 0.2300577,1.1868 0.4077709,1.0366 1.338019,1.8158 2.463427,2.0374 -0.293065,0.08 -0.576436,0.1237 -0.886303,0.1237 -0.21261,0 -0.4252196,-0.026 -0.6294282,-0.071 0.4345892,1.3109 1.6656572,2.2674 3.1280742,2.3029 -1.152227,0.8857 -2.58718,1.4084 -4.1552562,1.4084 -0.2749707,0 -0.5315239,-0.018 -0.8061715,-0.045 1.4882669,0.9303 3.2511817,1.4792 5.1384947,1.4792 5.235753,0 8.469486,-3.6225 9.310554,-7.3867 0.151218,-0.6729 0.221657,-1.3373 0.221657,-1.9928 0,-0.1417 0,-0.292 0,-0.4251 0.646876,-0.4693 1.22299,-1.054 1.665657,-1.7094 l 0,0" />
  </a>
  <a class="g__icon off" xlink:href="#">
    <circle cx="84" cy="16" r="15" />
    <path d="m 92.98962,15.0525 c -0.105982,0 -0.229735,0 -0.354134,0 0,-0.027 0,-0.062 0,-0.072 0,-0.097 0,-0.1767 0,-0.2478 0,-0.452 0.009,-0.9037 0,-1.3645 0,-0.071 -0.08853,-0.2036 -0.124399,-0.2036 -0.406802,-0.018 -0.82362,-0.018 -1.25724,-0.018 0,0.5493 0,1.0634 0,1.5859 0,0.098 0,0.2038 0,0.3008 -0.647199,0 -1.249162,0 -1.905408,0 0,0.1509 0,0.2488 0,0.346 0.01809,0.3367 0.02714,0.6821 0.05331,1.0185 0.327961,0.018 0.655923,0.035 1.000687,0.035 0.275616,0.01 0.558342,0 0.859485,0 0,0.6556 0,1.2583 0,1.8606 0.470132,-0.01 0.903752,0 1.373561,0 0,-0.6204 0,-1.2227 0,-1.8606 0.637829,0 1.240115,0 1.860172,0 0,-0.3631 0,-0.6998 0,-1.054 0,-0.1153 0,-0.2216 0,-0.3276 -0.495658,0 -1.000686,0 -1.506038,0 l 0,0 z m -5.359829,-0.1687 c -1.178076,0.018 -2.356476,0.018 -3.534553,0.018 -0.336362,0 -0.682095,-0.018 -1.01038,0 -0.07044,0 -0.176744,0.08 -0.176744,0.1238 -0.009,0.6827 -0.009,1.3645 -0.009,2.0734 0.96579,0 1.913486,0 2.879276,0 -0.02649,0.1416 -0.05299,0.2479 -0.09726,0.3455 -0.43459,1.3112 -1.790056,1.9581 -3.251828,1.719 -1.807181,-0.3015 -2.9232198,-1.9672 -2.5955814,-3.7744 0.035543,-0.2569 0.1240761,-0.505 0.2126094,-0.7354 0.602286,-1.3112 2.081829,-2.1087 3.543924,-1.7807 0.522476,0.1153 0.974837,0.3544 1.35482,0.6999 0.531847,-0.5316 1.036876,-1.0366 1.586171,-1.5856 -0.03554,-0.027 -0.09726,-0.071 -0.1328,-0.1153 -1.275658,-1.0721 -2.737752,-1.4709 -4.376591,-1.1962 -2.3658465,0.3809 -4.0660767,2.2414 -4.4292578,4.4118 -0.1683428,0.9216 -0.097581,1.9051 0.2659235,2.8616 0.9037522,2.2951 3.2153153,3.7032 5.6961913,3.4289 1.213619,-0.1331 2.294761,-0.5671 3.127428,-1.4621 1.248516,-1.3287 1.576155,-2.9233 1.372915,-4.6865 -0.03554,-0.2921 -0.150248,-0.3454 -0.425219,-0.3454 l 0,0" />
  </a>
  <a class="yt__icon off" xlink:href="#">
    <circle cx="118" cy="16" r="15" />
    <path d="m 120.728382,15.8186 -4.420857,2.382 0,-4.7824 2.002342,1.0896 2.418515,1.3108 z m 5.280019,-3.2241 c 0,0 -0.167697,-1.1781 -0.6556,-1.6917 -0.619734,-0.6732 -1.319924,-0.6819 -1.629791,-0.7265 -2.285714,-0.1683 -5.714286,-0.1683 -5.714286,-0.1683 l -0.01809,0 c 0,0 -3.419201,0 -5.705562,0.1683 -0.3273153,0.045 -1.0184579,0.053 -1.6385152,0.7265 -0.4875803,0.5136 -0.6552769,1.6917 -0.6552769,1.6917 0,0 -0.1689891,1.3816 -0.1689891,2.7454 l 0,1.3021 c 0,1.3816 0.1689891,2.7457 0.1689891,2.7457 0,0 0.1676966,1.1781 0.6552769,1.7005 0.6200573,0.6819 1.4355992,0.6557 1.8075042,0.7261 1.302153,0.1331 5.554667,0.1773 5.554667,0.1773 0,0 3.428572,-0.018 5.714286,-0.1773 0.309867,-0.044 1.010057,-0.044 1.629791,-0.7261 0.487903,-0.5224 0.6556,-1.7005 0.6556,-1.7005 0,0 0.159296,-1.3641 0.159296,-2.7457 l 0,-1.3021 c 0,-1.3638 -0.159296,-2.7454 -0.159296,-2.7454 l 0,0" />
  </a>
</svg>


Примечания:
Выбрал этот топик для перевода с Enso, потому что код короткий, понятный и полезный для случая, когда нужно не заморачиваясь добавить социальные иконки со cсылками на разрабатываемый сайт и ещё плюс иконки красятся через переменные, которые имеют наивысший приоритет, то есть не будет проблем со стилизацией иконок SVG

4
  • я то думал будет отрисоватся __svg__елемент при mouseout .. :(
    – Randall
    6 дек 2018 в 13:02
  • 1
    @Избытоксусликов Хочешь песен про прорисовку линий, так они есть у меня ru.stackoverflow.com/q/723274/28748 - прорисовка схем, иконок 6 дек 2018 в 13:14
  • спасибо обожаю этот функционал отрисовки в SVG :)
    – Randall
    6 дек 2018 в 13:16
  • @Избытоксусликов сейчас ещё найду, более интересные работы, в том числе прорисовка ретро соц. иконок ru.stackoverflow.com/q/686793/28748 6 дек 2018 в 13:25

Ваш ответ

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

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