使用对象时，如何在鼠标悬停时更改 SVG 描边颜色

Question

当鼠标移到图像上时，我正在尝试更改 svg 图像笔划颜色。我现在所拥有的不会改变笔触的颜色，我也不确定为什么。如果我通过开发工具手动更改笔触颜色，它可以正常工作。

我确实注意到，当我使用对象加载 svg 时，我在检查器中得到了#document项目。这是否会影响为什么当我将鼠标悬停在图像上时我的颜色没有改变？

<li class="nav-item">
<a href="">
<object data="/images/icon.svg"></object>
</a>
</li>

.nav-item {
svg:hover {
path {
stroke: #da25e7;
}
}
}

Answer 1

看起来我可以直接将样式放在 svg 文件中。这样做的缺点是它无处不在，我不想在图像中使用悬停效果的地方仍然会有一个。

<svg>
<style>
svg:hover path {stroke: #da25e7;}
</style>
<rect ...>...</rect>
</svg>

然后包括文件：

<object data="/images/icon.svg"></object>