Svg картинка поверх другой svg картинки при hover?

Question

[Minusator]

Всем привет. На сайте вставляю svg картинку. Задача, сделать, при наведении курсором, смену на другое svg изображение. В интернете нашел как менять цвет заливки. Это не то.

<a href="{vk_url}" target="_blank" class="soc_vk"><svg class="icon icon-vk"><use xlink:href="#icon-vk"></use></svg></a>

Пробовал делать через css, но картинка появляется под изображением

.soc_vk:hover {
    background-image: url(/templates/Default/images/hover_svg/vk_hover.svg);
	
    }

Answer 1

[Петр]

Если вы делаете через < use >, то требуется их 2.

<svg class="icon icon-vk">
  <use class='svg1' xlink:href="#icon-vk"></use>
  <use class='svg2' xlink:href="#icon-hover"></use>
</svg>

и стили

.soc_vk:hover .svg1{ display: none; }
.soc_vk:hover .svg2{ display: inline; }

.soc_vk:not(:hover) .svg1{ display: inline; }
.soc_vk:not(:hover) .svg2{ display: none; }