下载的SVG图标添加fill属性无效，求原因及解决方法

问题原因 #

你的SVG路径由多个闭合子路径构成，且部分子路径的绘制方向（顺时针/逆时针）与主路径相反。SVG默认使用非零环绕填充规则（non-zero winding rule），当路径方向相反时，重叠区域的填充会被抵消，导致内部看起来是空的，即使添加fill="black"也无法显示填充效果。

解决办法 #

方法1：修改填充规则为奇偶规则 #

在<path>标签中添加fill-rule="evenodd"属性，该规则会根据路径穿过区域的次数决定是否填充（奇数次填充，偶数次不填充），能正确识别需要填充的内部区域：

<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 125" x="0px" y="0px">
<path fill="black" fill-rule="evenodd" d="M76.25,87.5h-15a3.75,3.75,0,0,1-3.75-3.75V61.25h-15v22.5a3.75,3.75,0,0,1-3.75,3.75h-15A11.263,11.263,0,0,1,12.5,76.25V46A14.9,14.9,0,0,1,18.291,34.16l24.8-19.29a11.244,11.244,0,0,1,13.814,0l24.8,19.291A14.9,14.9,0,0,1,87.5,46V76.25A11.263,11.263,0,0,1,76.25,87.5ZM65,80H76.25A3.754,3.754,0,0,0,80,76.25V46a7.45,7.45,0,0,0-2.895-5.92L52.3,20.79a3.749,3.749,0,0,0-4.606,0L22.9,40.08h0A7.45,7.45,0,0,0,20,46V76.25A3.754,3.754,0,0,0,23.75,80H35V61.25a7.509,7.509,0,0,1,7.5-7.5h15a7.509,7.509,0,0,1,7.5,7.5ZM20.593,37.12h0Z"/>
</svg>

方法2：修正路径绘制方向 #

使用SVG编辑工具（如Inkscape、Figma）打开该SVG，选中反向的子路径，将其方向改为与主路径一致（例如把逆时针路径转为顺时针），这样默认的非零环绕规则就能正常填充。这种方法适合需要保留默认填充规则的场景。

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