Css ：当svg位于外部文件中时，悬停不在svg上工作

所以我正在学习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>

.st0:悬停{
填充物：红色；
}

当svg代码位于html文件中时，这与预期完全一样

但是，当我把它放在svg文件中并使用img标记调用它时，悬停效果就不再有效了

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

有没有一种不在html中嵌入svg代码的方法

---

谢谢

无法使用

标记完成。请参阅：。在本文的页面底部有一个表格，列出了每种SVG嵌入技术（即，img、object等）的优缺点。我在这里复制了这个表格：

| | CSS交互| CSS动画| SVG动画|
|:--------------------:|:----------------:|:--------------:|:--------------:|
||否|是*|是|
|CSS背景图像|否|是*|是|
||是*|是*|是|
||是*|是*|是|
||是*|是*|是|
|（内联）|是|是|是|

---

*只有在

内部，我才把这个答案作为一种应用版本来写。下面的代码片段展示了如何利用

的各种形式，以及它们在每个上下文中的功能

根据上下文的不同，

可能会或可能不会从顶级文档接收样式规则，也可能会或可能不会从顶级文档接收交互事件（

：hover

）

我建议您查看下面的代码片段，以查看正在运行的应用程序：

const someSVG=`
.interactive.from-svg{
填充物：红色；
过渡：轻松填充200ms；
}
.interactive.from svg:hover{
填充：蓝色；
}
.animated.from-svg{
动画：3s无限交替变色；
}
@关键帧改变颜色{
从{
填充：绿色；
}
到{
填充：紫色；
}
}
`;
constdatauri=`data:image/svg+xml；base64，${btoa（someSVG）}`；
const imgContainer=document.getElementById（“img容器”），
img=document.createElement（“img”）；
imgContainer.appendChild（img）；
img.src=dataUri；
const backgroundImageContainer=document.getElementById（“背景图像容器”），
backgroundImage=document.createElement（“div”）；
backgroundImageContainer.appendChild（backgroundImage）；
backgroundImage.style.width=“128px”；
backgroundImage.style.height=“128px”；
backgroundImage.style.backgroundImage=`url（${dataUri}）`；
const iframeContainer=document.getElementById（“iframe容器”），
iframe=document.createElement（“iframe”）；
iframeContainer.appendChild（iframe）；
iframe.src=dataUri
main{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
部分{
弹性基准：50%；
柔性生长：1；
弹性收缩：0；
}
.interactive.from-doc{
填充物：红色；
过渡：轻松填充200ms；
}
.交互式。来自文档：悬停{
填充：蓝色；
}
.from-doc{
动画：3s无限交替变色；
}
@关键帧改变颜色{
从{
填充：绿色；
}
到{
填充：紫色；
}
}
li.pro{
颜色：绿色；
}
李康{
颜色：红色；
}
svg
用法比较
img

不接收来自顶级文档的任何样式
不使用CSS交互，例如
：hover
如果CSS动画是在svg元素的样式中定义的，则将使用CSS动画

背景图像

不接收来自顶级文档的任何样式
不使用CSS交互
如果CSS动画是在svg元素的样式中定义的，则将使用CSS动画

iframe

不接收来自顶级文档的任何样式
如果CSS交互是在svg元素的样式中定义的，
将使用CSS交互
如果CSS动画是在svg元素的样式中定义的，则将使用CSS动画

内联
svg
.interactive.from-svg{
填充物：红色；
过渡：轻松填充200ms；
}
.interactive.from svg:hover{
填充：蓝色；
}
.animated.from-svg{
动画：3s无限交替变色；
}
@关键帧改变颜色{
从{
填充：绿色；
}
到{
填充：紫色；
}
}

从顶级文档接收所有样式规则
如果CSS交互是在svg元素的样式中定义的，
将使用CSS交互
如果CSS动画是在svg元素的样式中定义的，则将使用CSS动画

找到了答案。。。我觉得这篇文章很有帮助。谢谢你的反馈！请问这是什么