Question

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

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

然而，当将它应用于我的SVG符号时，它只是不起作用。关于用像SVG符号改变带有阴影DOM之类的东西的问题，我在过去几年里所发现的问题并没有多少讨论，但刚刚使用的CurrentColor对我来说不起作用，因为我需要用两种颜色来做。

我的方案here

有CodePen

看起来这应该是直截了当的，但我已经被打了一段时间。有人有任何可能有帮助的想法吗？

提前致谢！

Answer 1

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

问题是use引用的元素实际上不是DOM的一部分，因此您无法使用CSS访问它们。但是，use元素本身（如fill或color）上设置的某些属性会逐渐显示为引用的元素。

因此，首先，我们的CSS只能更改use元素。然后我们需要使用提到的article @Matheus中的一些技巧来处理不同的颜色。这意味着稍微更改symbol s的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;
}

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

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

Answer 2

html:hover .transflip {
  fill: red;
}

这种悬停有效。我注意到您为g和path使用了相同的课程。我尽量不去。

我还尝试将每个svg包装在div的宽度和高度中，然后在:focus上使用div等等，因为svg元素似乎不会识别笔上的假选择器。

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

2 个答案: