自定义SF Symbol导入后所有区域被填充颜色是什么原因

在Inkscape中编辑正常的自定义SF Symbol导入后所有区域被黑色填充，核心是Inkscape导出SVG的默认规则和SF Symbols的SVG解析逻辑不匹配导致的，对应现象参考：

• Inkscape中编辑状态的SVG结构：
• SF Symbols App内的异常渲染效果：

具体错误点 #

• 白色填充形状被识别为符号实体：SF Symbols不会识别填充色的黑白差异，只要形状填充不是完全透明，就会被判定为符号的可渲染部分，统一用前景黑色渲染。文件中填充为白色的rect辅助块，在导入时会被直接识别为实体区域。
• 全局默认填充样式兜底：Inkscape导出SVG时会自动在公共样式块添加全局fill:#000规则，所有没有显式指定fill="none"的形状，哪怕在Inkscape里设置了无填充/镂空，都会继承这个全局样式被填充为黑色。
• 路径方向不符合非零环绕规则：SF Symbols用非零环绕数规则判断镂空区域，如果轮廓路径和内部镂空路径的绘制方向一致，原本应该透明的镂空区域会被判定为实体，触发全填充效果。

修复操作步骤 #

1. 清理冗余辅助元素：导出前直接删除用来做边界参考的白色填充rect，不要把任何非符号本身的辅助形状留在最终导出的SVG里。
2. 显式设置无填充属性：选中所有不需要渲染的形状/路径，在Inkscape填充面板直接选择「无填充」，不要用白色填充模拟空白。导出前打开Inkscape内置的XML编辑器检查：
   • 删除根节点、公共样式块里的全局默认fill规则
   • 所有非渲染路径必须显式携带fill="none"属性
3. 校正路径方向：选中所有组成符号的路径，执行「路径 > 反转路径方向」操作，确保外轮廓和内部镂空路径的绘制方向相反，符合非零环绕规则的镂空判定要求。
4. 调整导出配置：导出时选择「导出为普通SVG」选项，不要保留Inkscape私有属性、编辑元数据，减少冗余样式干扰解析。

快速验证方法：导出SVG后拖入浏览器打开，把浏览器页面背景设置为深灰色，如果此时SVG显示效果和预期的符号样式完全一致，没有多余黑色块，再导入SF Symbols App就不会出现全填充问题。

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