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

Question

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

我确实注意到，当我使用对象加载 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>

How to change SVG stroke color on mouse over when using an object