悬停时使用 SVG <symbols> 更改 CSS

Question

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

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

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

我这里有一个 CodePen 来记录我的场景

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

提前致谢！

Answer 1

这里提出了类似的问题：SVG USE element and :hover style

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

所以，首先我们的CSS只能改变use元素。然后我们需要使用@Matheus文章中提到的一些技巧来处理不同的颜色。这意味着稍微更改一下 SVG 代码symbol。如果图标每个状态只需要两种颜色，我们可以使用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 变量并style="fill: var(--my-special-color)"在 SVG 中添加样式（也是提到的文章中的一个技巧），但这在某些浏览器中不起作用，例如 IE/Edge。

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