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

Question

我今天研究了一段时间如何在悬停时更改 svg 填充颜色。我已经能够通过使用对象标记并链接到我的 CSS 文件来使其工作，以便我可以在外部设置它的样式。但是，只有当我实际将鼠标悬停在 SVG 本身上时，我才能让它工作。我在一个标签中有我的对象和一个文本标签，我想在将鼠标悬停在 .当我尝试从对象进一步向上定位时，它不起作用。我相信我读到对象内的 SVG 无法识别任何父元素，所以我不确定这是否是问题所在。任何帮助，将不胜感激！下面是我的 html 的片段。我应该指出 class "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 "path"，这就是我在外部 CSS 文件中专门针对的内容。

<?xml-stylesheet type="text/css" href="../stylesheets/main.css"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64">
<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>

Answer 1

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

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

Answer 2

你有没有想过类似的事情？

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" width="64" height="64">
<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 填充颜色

Change SVG Fill Color on hover of another element

html

css

svg

hover