:当svg在外部文件中时，hover无法在svg上运行

问题描述

所以我正在学习SVG动画.

So I'm learning SVG animation.

基本上，我要做的就是将鼠标悬停在圆形上时更改其颜色.

Basically all I'm trying to do is change the color of a circle when it's hovered over.

<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文件中时，此功能完全可以正常工作.

This works exactly as expected when the svg code is inside the html file.

但是，当我将其放入svg文件并使用img标签调用它时，悬停效果不再起作用.

However, when I put it inside an svg file and call it in using the img tag the hover effect no longer works.

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

是否可以在不将svg代码嵌入html的情况下做到这一点?

Is there a way to do this without embedding the svg code inside the html?

谢谢！

推荐答案

不能使用<img>标记完成.请参阅:使用CSS设置SVG的样式和动画.在本文页面底部附近，有一张表格，列出了每种SVG嵌入技术(即img，对象等)的优缺点.我在这里转载了表格:

Can't be done with the <img> tag. See: Styling And Animating SVGs With CSS. Near the bottom of the page of this article there's a table with the pros and cons of each SVG embedding technique (ie, img, object, etc.). I have reproduced the table here:

|                      | 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>

这篇关于:当svg在外部文件中时，hover无法在svg上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！