如何修改按钮内嵌图片在鼠标悬停时的颜色以避免其消失

你使用的SVG图标内置的描边颜色为纯白色#fff：

• 按钮默认状态背景为红色，白色图标可以正常显示
• 按钮悬停时背景切换为白色，白色图标和背景颜色重合，视觉上就像消失了，并非真的被隐藏。

方案一：修改SVG使用currentColor继承父元素颜色（最推荐，长期维护更方便） #

将SVG代码中stroke:#fff替换为stroke:currentColor，图标颜色会自动继承按钮的color属性。你已经在悬停样式里设置了按钮文字为红色，替换后图标会自动跟随文字变红，无需额外写CSS。
你可以直接把base64解码后修改对应属性再重新编码，也可以直接把内联SVG写在按钮里，示例如下：

<button class="btn">
<svg xmlns="http://www.w3.org/2000/svg" width="19.107" height="24.977" viewBox="0 0 19.107 24.977"><defs><style>.a,.b{fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:1.5px;}.a{stroke-linecap:round;}</style></defs><g transform="translate(0.75 0.75)"><g transform="translate(4.129 11.608)"><line class="a" x2="9.346" transform="translate(0 0)"/><line class="a" x2="9.346" transform="translate(0 3.445)"/><line class="a" x2="9.346" transform="translate(0 6.891)"/></g><path class="b" d="M5615.234,1093.019H5603.79l-4.537,3.937v17.914a1.63,1.63,0,0,0,1.625,1.625h14.356a1.631,1.631,0,0,0,1.626-1.625v-20.226A1.63,1.63,0,0,0,5615.234,1093.019Z" transform="translate(-5599.253 -1093.019)"/><path class="b" d="M5609.569,1093.792v5h-3.053" transform="translate(-5603.565 -1093.478)"/></g></svg>
order
</button>

同时可以加个小优化，去掉HTML里的 ，用CSS控制图标和文字间距，更规范：

.btn img, .btn svg {
  margin-right: 8px;
}

方案二：用CSS滤镜修改悬停图标颜色（无需修改原有SVG代码） #

如果你不想改动现有的SVG和HTML结构，直接加一段CSS即可实现悬停时图标变红：

.btn:hover img {
  /* 该滤镜参数可将白色图标转为红色 */
  filter: brightness(0) saturate(100%) invert(16%) sepia(97%) saturate(7443%) hue-rotate(358deg) brightness(102%) contrast(112%);
}

内容的提问来源于stack exchange，提问作者Janek