css - 在悬停时使用 SVG 更改 CSS

Question

我正在处理一些 SVG 图标，如 <symbol>我希望能够在 :hover 上进行更改, :focus , 和 :active .具体来说，我需要能够更改 SVG 中特定路径的颜色。通常，对于任何其他元素，我都可以做这样的事情

.parent .child {
    fill: blue;
}
.parent:hover .child {
    fill: red;
}

但是，当将它应用到我的 SVG 符号时，它就是不起作用。在过去的几年里，关于使用 SVG 符号等 shadow-DOM 内容更改 css 的问题，我发现的讨论不多，但仅使用 CurrentColor 对我来说不起作用，因为我需要使用两种颜色。

我有一个 CodePen 来处理我的场景 here

看起来这应该很简单，但我已经纠结了一段时间。任何人有任何可能有帮助的想法吗？

提前致谢!

Answer 1

此处提出了类似的问题:SVG USE element and :hover style

问题是 use 引用的元素实际上并不是 DOM 的一部分，因此您无法使用 CSS 访问它们。但是，在 use 元素本身上设置的一些属性(如 fill 或 color)将渗透到引用的元素。

所以，首先，我们的CSS只能改变use元素。然后我们需要使用article中的一些技巧@Matheus 提到处理不同的颜色。这意味着稍微更改 symbol 的 SVG 代码。如果图标每个状态只需要两种颜色，我们可以使用 fill + color/currentColor:

<g id="icon_alarm">
    <g class="transflip">
        <path class="transflip" d="M8 1.3c-3.6 ....." />
        <path class="transflip" d="M1 5.1C1.7 3....." />
    </g>
    <g class="fillflip">
        <path class="fillflip" fill="currentColor" d="M11.7 8......" />
    </g>
    ...

---

.icon use {
    fill: transparent;
    color: #007fa3;
}
.icon:hover  use {
    fill: #007fa3;
    color: transparent;
}

如果每个状态的图标需要更多颜色，我们可以使用 CSS variables并在 SVG 中添加 style="fill: var(--my-special-color)" 样式(也是上述文章中的技巧)，但这在某些浏览器中不起作用，例如IE/边缘。

使用这两种技术更新笔:https://codepen.io/Sphinxxxx/pen/GMjgxJ?editors=1100