: hover не работает на svg, когда svg находится во внешнем файле

Question

Итак, я изучаю анимацию SVG.

В основном все, что я пытаюсь сделать, это изменить цвет круга, когда он зависнет.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
viewBox="0 0 437.1 294.4" style="enable-background:new 0 0 437.1 294.4;" xml:space="preserve"> 

    <style type="text/css"> 

     .st0:hover { 
      fill: red; 
     } 

    </style> 

    <g id="Circle"> 
     <path class="st0" d="M291.3,147.4c0,77-62.4,139.4-139.4,139.4S12.5,224.4,12.5,147.4C12.6,70.4,75,8,151.9,8 
     C228.9,8,291.3,70.4,291.3,147.4"/> 
    </g> 

</svg> 

Это работает точно так, как ожидалось, когда код svg находится внутри html-файла.

Однако, когда я помещаю его в файл svg и вызываю его с помощью тега img, эффект зависания больше не работает.

<img class="logo" src="url/logo.svg"> 

Есть ли способ сделать это без встраивания кода svg внутри html?

Спасибо!

Answer 1

не может быть сделано с IMG тег

https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/

В нижней части страницы этой статьи есть таблица плюсов и минусов каждого вложения техники SVG (т.е. IMG, объект и т. д.)