使用SVG< symbols>更改CSS悬停时 [英] Changing CSS with SVG <symbols> on hover

问题描述

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

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

但是，将其应用于我的SVG符号时，它根本不起作用.在过去的两年中，我没有太多讨论关于使用诸如SVG符号之类的Shadow-DOM东西更改css的问题，但是仅使用CurrentColor对我来说是行不通的，因为我需要用两种颜色来做. >

我有一个与我的方案有关的CodePen 此处

这似乎应该很简单，但是我已经为它苦苦挣扎了一段时间了.有人有什么想法可能会有所帮助吗?

提前谢谢！

解决方案

此处提出了类似的问题:文章 @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变量并在SVG中添加style="fill: var(--my-special-color)"样式(也是上述文章中的技巧)，但这在某些浏览器中不起作用，例如IE/Edge.

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

I'm working on a handful of SVG icons as <symbol> that I want to be able to alter on :hover, :focus, and :active. Specifically, I need to be able to change the color of specific paths within an SVG. Normally, with any other element, I can do something like this

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

However, when applying this to my SVG symbols, it just doesn't work. Not many discussions from what I can find in the last couple of years on problems changing css with shadow-DOM stuff like SVG symbols, but the just using CurrentColor won't work for me because I need to do it with two colors.

I have a CodePen up with my scenario here

It seems like this should be straightforward but I've been tied up in knots over it for awhile. Anybody have any thoughts that might help?

Thanks in advance!

解决方案

A similar question was asked here: SVG USE element and :hover style

The problem is that elements that are referenced by use aren't really part of the DOM, so you can't access them with CSS. However, some properties that are set on the use element itself (like fill or color) will trickle down to the referenced elements.

So, first of all, our CSS can only change the use element. Then we need to use some of the tricks in the article @Matheus mentioned to handle the different colors. This means changing the SVG code for the symbols a little. If the icons only need two colors per state, we can use 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;
}

If the icons need more colors per state, we can use CSS variables and add style="fill: var(--my-special-color)" styles in the SVG (also a trick from the mentioned article), but that doesn't work in some browsers, e.g. IE/Edge.

Updated pen using both techniques: https://codepen.io/Sphinxxxx/pen/GMjgxJ?editors=1100

这篇关于使用SVG< symbols>更改CSS悬停时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！