如何为取消SVG图标中的叉号（X）设置非透明颜色

你的问题在于当前SVG里的圆形和叉号是同一个复合路径（通过路径减法实现镂空效果），所以叉号区域只能是透明的。要给叉号单独设置颜色，得把它们拆成两个独立的图形路径：

• 第一个路径作为实心圆形背景
• 第二个路径单独绘制叉号形状

修改后的SVG代码如下：

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
    <!-- 圆形背景，保留你原来的底色 -->
    <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4z" fill="#b01e1e"/>
    <!-- 叉号形状，可替换成你需要的颜色，示例为白色 -->
    <path d="M34 31.17L31.17 34 24 26.83 16.83 34 14 31.17 21.17 24 14 16.83 16.83 14 24 21.17 31.17 14 34 16.83 26.83 24 34 31.17z" fill="#ffffff"/>
    <path d="M0 0h48v48H0z" fill="none"/>
</svg>

简单说明： #

1. 拆分后圆形路径保留了原有的红色填充#b01e1e
2. 叉号路径的fill值可以改成任意你需要的颜色代码
3. 独立路径叠加后，叉号会显示在圆形上方，实现自定义颜色的效果

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