DXF转SVG自定义生成路径时部分Path填充异常如何排查修复

问题背景 #

• 自研DXF格式转SVG格式的功能函数，此前基于maker.js实现路径链式拼接、重复路径移除逻辑，因场景覆盖稳定性不足，切换为全自定义实现方案。
• 当前实现逻辑：将间距足够近的x/y坐标合并为单条path路径，生成对应图层的路径内容。
• 现存问题：部分场景下路径无法正确填充，异常案例代码如下：

<svg width="112mm" height="94mm" viewBox="2313.0507 -1099.573 112 94" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke-linecap:round;stroke-linejoin:round;fill-rule:evenodd;  stroke: #000;stroke-width: 1.5px;"><g id="importedPart" transform="scale(1,-1)" fill-rule="evenodd" style="stroke-linecap:round;stroke-linejoin:round;fill:#c0c0c0;fill-rule:evenodd;"><path d="M2425.0507,1075.7029 L2425.0507,1029.4431 M2425.0507,1075.7029 A10,10 0 0,1 2417.8574,1085.301M2371.8574,1099.1711 L2417.8574,1085.301 M2371.8574,1099.1711 A10,10 0 0,1 2366.2441,1099.1711M2366.2441,1099.1711 L2320.2441,1085.301 M2320.2441,1085.301 A10,10 0 0,1 2313.0507,1075.7029M2313.0507,1029.4431 L2313.0507,1075.7029 M2313.0507,1029.4431 A10,10 0 0,1 2320.2441,1019.8451M2366.2441,1005.975 L2320.2441,1019.8451 M2366.2441,1005.975 A10,10 0 0,1 2371.8574,1005.975M2371.8574,1005.975 L2417.8574,1019.8451 M2417.8574,1019.8451 A10,10 0 0,1 2425.0507,1029.4431" id="4bcf575e-280a-415e-a59c-d62ff0dc0a80"></path><circle cx="2329.360729224585" cy="1070.833023906307" r="8.5" style="stroke-linecap:round;stroke-linejoin:round;fill:#FFF;fill-rule:odd-even;"></circle><circle cx="2408.740729224585" cy="1034.313023906308" r="8.5" style="stroke-linecap:round;stroke-linejoin:round;fill:#FFF;fill-rule:odd-even;"></circle></g></svg>

核心排查项 #

要实现路径图层的完整正确填充，需要逐一检查以下路径属性：

• 路径连续性：单个封闭轮廓不能存在不必要的M（抬笔移动）指令。当前案例的外框path被大量M指令拆成了16段互相独立的线段/圆弧，没有形成连续的绘制流，SVG填充算法无法识别这些碎段属于同一个封闭轮廓，这是填充失败的核心原因。本案例中所有相邻线段/圆弧的端点坐标完全重合，不需要抬笔，直接连续绘制即可。
• 路径闭合性：每个独立轮廓（外框、内部挖空的孔洞）绘制完成后必须添加Z指令显式闭合路径，不能仅让路径终点和起点坐标近似重合就结束绘制。显式闭合可以让填充算法准确识别轮廓边界，避免出现缺口漏填。
• 路径方向一致性：使用fill-rule: evenodd（当前代码已配置该规则，适配带孔洞的图形场景）时，外轮廓需要统一按顺时针或逆时针方向绘制，内部挖空的孔洞路径方向需要和外轮廓方向相反，否则会出现填充区域错乱、孔洞漏挖的问题。路径被拆成碎段时，算法无法识别整体轮廓方向，必然出现填充异常。
• 坐标合并逻辑合理性：检查近邻坐标合并的阈值和匹配逻辑，既不能因为阈值设置过小、端点匹配错误，把本该连接的轮廓端点拆成独立断点；也不能因为阈值设置过大，把属于不同轮廓的端点错误拼接在一起，导致轮廓交叉错乱。

本案例修正方向 #

当前案例的外轮廓只需要移除所有拆分路径的M指令，让直线、圆弧按连接顺序连续绘制，最后在路径结尾加上Z指令闭合，配合现有两个白色填充的圆形孔洞，即可在evenodd填充规则下实现正确效果：外框填充灰色，两个圆形孔洞填充白色。

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