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

Posted 2023-03-06

【中文标题】使用对象时如何在鼠标悬停时更改 SVG 笔触颜色

【英文标题】：How to change SVG stroke color on mouse over when using an object

【发布时间】：2020-05-30 16:50:15

【问题描述】：

当鼠标移到图像上时，我正在尝试更改 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;
        
    

【问题讨论】：

这对为什么当我将鼠标悬停在图像上时我的颜色没有改变有任何影响吗？ --> 是的。使用对象就像使用 iframe，你不能使用外部 CSS 影响里面的内容

那么，我有没有另一种方法可以在不将 svg 文件嵌入页面的情况下更改 svg 的颜色？

我不这么认为，除非您考虑一些解决方法来模拟颜色变化，如过滤器、混合混合模式等......一些例子：***.com/a/58450728/8620333

【参考方案1】：

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

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

然后包含文件：

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

【讨论】：

将pointer-events:none添加到您不想要悬停效果的对象

我假设您的意思是object 标签？