Итак, я использую следующий HTML-код для отображения SVG: -
<a href="<?php the_field('instagram_url', 'options'); ?>" target="_blank">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1233 5105 c-607 -111 -1081 -572 -1210 -1175 -17 -80 -18 -167 -18
-1370 0 -1195 1 -1291 18 -1368 127 -591 574 -1039 1167 -1168 80 -18 154 -19
1370 -19 1199 0 1291 1 1368 18 590 127 1042 579 1169 1169 17 77 18 169 18
1368 0 1204 -1 1290 -18 1370 -62 289 -201 544 -412 755 -217 217 -463 350
-760 410 l-123 25 -1248 -1 c-986 -1 -1264 -4 -1321 -14z m2670 -417 c316 -87
563 -289 706 -576 49 -96 86 -221 101 -334 8 -57 10 -457 8 -1273 l-3 -1190
-27 -98 c-31 -112 -97 -257 -158 -346 -55 -83 -158 -190 -239 -252 -91 -69
-266 -153 -386 -186 l-100 -28 -1245 0 -1245 0 -98 27 c-316 87 -563 289 -706
576 -47 93 -85 218 -100 326 -15 107 -15 2345 0 2452 67 486 452 864 944 927
17 3 575 4 1240 3 l1210 -1 98 -27z"/>
<path d="M4078 4331 c-67 -22 -120 -79 -139 -153 -38 -140 107 -277 249 -237
95 26 163 132 147 228 -8 50 -51 111 -98 140 -40 24 -118 35 -159 22z"/>
<path d="M2325 3924 c-501 -87 -919 -451 -1080 -937 -46 -140 -65 -265 -65
-427 0 -162 19 -287 65 -427 162 -488 583 -851 1089 -938 115 -19 337 -19 452
0 580 100 1039 559 1139 1139 20 116 19 336 -1 457 -70 419 -351 802 -732 997
-122 63 -275 115 -401 136 -117 20 -355 20 -466 0z m390 -399 c363 -59 654
-304 772 -650 122 -359 22 -765 -253 -1026 -335 -316 -843 -356 -1229 -96
-302 204 -465 576 -414 943 75 543 583 917 1124 829z"/>
</g>
</svg>
</a>
Это позволяет использовать fill: #<hex>; для установки цвета при наведении ... Вместо замены изображения.
Это отлично работает в Mac Safari, Windows Safari, просто не отображается даже в Mac Safari, используя fill: #FFF; Я предполагаю, что не работает для изменения цвета SVG с черного на белый.
Я создал JSFIDDLE , который работает как положено, но на живом сайте ничего не отображается, раньше он работал нормально, поэтому я не уверен, что здесь произошло ...
Когда я проверяю, где должен отображаться SVG, он просто не показывает никакого HTML-кода для иконки SVG выше.
Это только в Mac Chrome, последняя версия ...
Есть идеи?
Если вам нужна дополнительная информация, просто дайте мне знать.
Спасибо,