在悬停另一个元素时更改 SVG 填充颜色

Posted 2023-03-06

【中文标题】在悬停另一个元素时更改 SVG 填充颜色

【英文标题】：Change SVG Fill Color on hover of another element

【发布时间】：2016-11-25 07:58:51

【问题描述】：

我今天已经研究了很长一段时间，关于如何在悬停时更改 svg 填充颜色。我已经能够通过使用对象标记并链接到我的 CSS 文件来使其工作，以便我可以在外部设置它的样式。但是，当我实际将鼠标悬停在 SVG 本身上时，我只能让它工作。我在一个标签中有我的对象和一个文本标签，并且想在悬停 .当我尝试从对象进一步向上定位时，它不起作用。我相信我读到对象内的 SVG 无法识别任何父元素，所以我不确定这是否是问题所在。任何帮助，将不胜感激！下面是我的 html 的 sn-p。我应该指出“icon-md”类只定义了我的 SVG 的高度和宽度。

<div class="icon-button">
            <a href="#">
                <object type="image/svg+xml" class="icon-md" data="img/load-board.svg"></object><h3 class="icon-label">Load Board</h3>
            </a>
        </div>

这也是我的 SVG 文件的 HTML。我给了实际路径一个“路径”的 ID，这就是我在我的外部 CSS 文件中专门针对的。

<?xml-stylesheet type="text/css" href="../stylesheets/main.css"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"  >
<path id="path" style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Bitstream Vera Sans" d="M 5 5 L 5 6 L 5 26 L 5 27 L 6 27 L 26 27 L 27 27 L 27 26 L 27 6 L 27 5 L 26 5 L 6 5 L 5 5 z M 7 7 L 25 7 L 25 25 L 7 25 L 7 7 z M 10 10 L 10 15 L 15 15 L 15 10 L 10 10 z M 17 10 L 17 15 L 22 15 L 22 10 L 17 10 z M 10 17 L 10 22 L 15 22 L 15 17 L 10 17 z M 17 17 L 17 22 L 22 22 L 22 17 L 17 17 z" overflow="visible" font-family="Bitstream Vera Sans"/>
</svg>

【问题讨论】：

您需要在 load-board.svg 中执行此操作，但您尚未向我们展示。

【参考方案1】：

你有想过这样的事情吗？

div
  padding:10px;
  border:1px solid black;

div:hover svg path,
div:hover
  fill:red;
  color:red;

<div>
This is plain text
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"  >
<path id="path" style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Bitstream Vera Sans" d="M 5 5 L 5 6 L 5 26 L 5 27 L 6 27 L 26 27 L 27 27 L 27 26 L 27 6 L 27 5 L 26 5 L 6 5 L 5 5 z M 7 7 L 25 7 L 25 25 L 7 25 L 7 7 z M 10 10 L 10 15 L 15 15 L 15 10 L 10 10 z M 17 10 L 17 15 L 22 15 L 22 10 L 17 10 z M 10 17 L 10 22 L 15 22 L 15 17 L 10 17 z M 17 17 L 17 22 L 22 22 L 22 17 L 17 17 z" overflow="visible" font-family="Bitstream Vera Sans"/>
</svg>
</div>

【讨论】：

是的！这表现出我想要的样子。但是我注意到您将 SVG 代码直接放在 HTML 中。您知道是否可以使用

@lblankenship 您可以将其放在对象中，但您需要使 svg 文件直接引用 CSS，让 html 引用 CSS 将不起作用。

@RobertLongson 所以你是说我需要直接在 SVG 文件中使用我的 CSS？我已经引用了我的外部 CSS 文件，但是我只能让它在 SVG 本身悬停时工作。

@lblankenship 您可以通过 xml-stylesheet 将其包含在内。

@RobertLongson 嗯。我想我的问题是，每当我尝试 object svg #path 时，我都无法正确定位路径（我也尝试过其他父/子路径）当我将鼠标悬停在 周围时，它不会应用必要的样式物体。它适用于 中的标签，但 svg 仅在我更改我的 css 以在我专门将鼠标悬停在 SVG 上时应用样式时才有效。

【参考方案2】：

您是否尝试过使用 SVG 内联，而不是将其作为元素的源或数据属性？

编辑更新文章： https://css-tricks.com/svg-use-with-external-reference-take-2/

【讨论】：

我试图避免这种情况，因为我正在处理的项目很可能每页有相当多的 SVG，并且可能会有数百页。所以从维护的角度来看，我认为这对我来说不是最好的。

我很困惑...如果您是从对象的数据属性中的外部资源引用它，为什么不直接使用 ?

当使用您刚刚引用的内容时，我的 SVG 由于某种原因根本不显示。我浏览了这篇文章svgontheweb.com 并使用了列出的对象方法，我能够按照他们所说的去做并更改悬停时的填充。但是，我想悬停一个完全不同的元素并更改我的 SVG 颜色，而不必悬停 SVG 本身。我还应该说，icon-md 类仅定义了 SVG 的大小。我实际上更新了 SVG 文件中的 html，并为路径提供了一个“路径”ID，这是我在 CSS 中为 :hover 事件引用的内容。