如何使用 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>

我不确定如何撤消显示 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.

Answer 2

您可能需要执行以下操作： 您的 CSS 以 SVG 本身为目标，而不是构成 SVG 的元素。

.cancelBlue:hover { fill: #{color} }