当 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>标签来完成。请参阅：使用 CSS 设置 SVG 样式和动画。在本文页面底部附近有一个表格，其中列出了每种 SVG 嵌入技术（即 img、object 等）的优缺点。我在这里复制了该表：

|                      | CSS Interactions | CSS Animations | SVG Animations |
|:--------------------:|:----------------:|:--------------:|:--------------:|
|         <img>        |        No        |      Yes*      |       Yes      |
| CSS background image |        No        |      Yes*      |       Yes      |
|       <object>       |       Yes*       |      Yes*      |       Yes      |
|       <iframe>       |       Yes*       |      Yes*      |       Yes      |
|        <embed>       |       Yes*       |      Yes*      |       Yes      |
|    <svg> (inline)    |        Yes       |       Yes      |       Yes      |

*仅当在内部时<svg>