html - 使用对象时如何在鼠标悬停时更改 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>