当鼠标悬停在另一个元素上时改变SVG填充颜色

Question

当鼠标悬停在另一个元素上时改变SVG填充颜色

7

我今天进行了相当长时间的研究，试图在悬停时更改svg填充颜色。我能够通过使用对象标签并链接到我的CSS文件使其正常工作，以便我可以在外部进行样式设置。但是，只有当我实际悬停在SVG上时才能使其工作。我在一个a标签中拥有我的对象和文本标签，并希望在悬停时同时更改SVG的填充颜色和文本标签的颜色。但是，当我尝试从对象往上定位时，它不起作用。我认为我读到过一个关于SVG在对象内部无法识别任何父元素的问题，所以我不确定是否是问题所在。任何帮助将不胜感激！以下是我的html片段。我应该指出，“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>

- lblankenship

你需要在load-board.svg文件中完成这个操作，但是你还没有向我们展示它。 - Robert Longson

2个回答

-1

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

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

- Wade Hammes

我正在尝试避免这种情况，因为我正在开发的项目每个页面可能会有相当多的SVG，并且可能会有数百个页面。从维护的角度来看，我认为那不是最好的选择。 - lblankenship

我有点困惑...如果你是在对象的数据属性中引用外部资源，为什么不直接使用<svg class="icon-md"><use xlink:href="img/load-board.svg"></use></svg>呢？ - Wade Hammes

当我使用你刚才提到的内容时，我的SVG根本不显示。我阅读了这篇文章https://svgontheweb.com/，并使用了其中列出的对象方法，我能够做到他们所说的，在悬停时更改填充。但是，我想要悬停在完全不同的元素上，并更改我的SVG颜色，而不必悬停在SVG本身上。我还应该说一下，类icon-md仅定义了SVG的大小。我实际上更新了SVG文件中的HTML，并将路径的ID命名为“path”，这是我在CSS中引用的:hover事件。 - lblankenship

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Carle B. Navy · Accepted Answer

你是在想那样的东西吗？

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>