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>