css - 你如何使用 React 在悬停时渲染不同的 SVG

Question

我正在尝试渲染鼠标悬停时的 SVG 的不同颜色，但我想不出最好的方法。

当我查找这个问题时，它告诉我使用 fill:{color} 但我无法让它工作。我尝试创建两种不同的 SVG，一种是我通常想要的颜色(取消黑色)，另一种是我想要悬停时想要的颜色(取消蓝色)。然后我尝试这样做:

.cancelBlack:hover{
    display:none;
}
.cancelBlue{
    display: none;
}
.cancelBlue:hover{
    display:flex;
}
//heres how im calling it in react
<button type="button" className='cancelBlack'>
    <ReactSVG src={Cancel} />
</button>
<button type="button" className='cancelBlue'>
    <ReactSVG src={CancelBlue} />
</button>

这是 SVG 的源代码:

    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
    <g>

            <polyline fill="none" stroke="#4D4D4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
            17.686,6.303 12,11.986 17.712,17.697    "/>

            <polyline fill="none" stroke="#4D4D4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
            6.316,6.303 12,11.986 6.289,17.697  "/>
    </g>
    </svg>

我不确定如何撤消 display none，所以我只使用了 display:flex。感谢您的帮助。

Answer 1

您可以使用 opacity 或 fill-opacity 代替显示属性。

.cancelHover {
    position: absolute;
    z-index: 0;
}
.cancelNormal {
    opacity: 1;
    z-index: 1;
}
.cancelNormal:hover{
    opacity: 0;
}
...
<button type="button" className='cancelHover'>
    <ReactSVG src={CancelHover} />
</button>
<button type="button" className='cancelNormal'>
    <ReactSVG src={CancelNormal} />
</button>

另一种选择:

您需要删除 svg 文件中的 fill 和 stroke 属性。

它们是内联样式，因此您无法在您的 css 样式中更改它。

根据您的 svg 文件，它使用了笔触，因此您需要在 css 中更改笔触颜色。

.cancelNormal {
    stroke: #4D4D4D;
    z-index: 1;
}
.cancelNormal:hover{
    stroke: #0000;
    opacity: 0;
}

您还可以使用 stroke-width: 0 隐藏您的 svg 图像。