嘿，咱们先聊聊你遇到的填充失效问题，再给你说怎么用两条闭合线正确填充～

一、修改后填充失效的常见原因 #

结合你描述的“修改一条线使符号加粗后填充异常”，大概率是这几个问题：

• 路径方向冲突：SVG默认用「非零环绕规则」计算填充区域，如果你修改后的线条（或者转换后的路径）和原路径的绘制方向（顺时针/逆时针）相反，两个路径的填充区域会互相抵消，看起来就像填充失效了。
• 开放路径破坏闭合结构：如果你是直接修改了<line>元素的stroke-width来加粗，但<line>是开放的，和原闭合的<path>组合后，整个图形不是一个连续的闭合区域，SVG的填充算法无法识别出需要填充的范围。
• 路径拼接错误：要是你把原路径的一部分替换成了新的线条，但没确保新线条和原路径的起点/终点完全衔接，导致整个路径变成了非闭合状态，自然就没法正常填充了。

二、用两条闭合线正确填充单个区域的方法 #

这里给你三个实用方案，根据你的需求选就行：

1. 合并为单个闭合<path>元素 #

把两条闭合线的路径数据合并到同一个<path>里，每条子路径都用Z标记闭合，同时统一路径方向：

• 如果需要填充两个区域的并集（比如外框和内部都填充），保持两条子路径的绘制方向一致（比如都是顺时针）；
• 如果需要外框填充、内部挖空，让内部子路径的方向和外部相反（比如外部顺时针，内部逆时针）。

示例代码：

<path d="M10,10 L50,10 L50,50 L10,50 Z M20,20 L40,20 L40,40 L20,40 Z" fill="#ff4444" fill-rule="nonzero" />

2. 用<g>组合+调整填充规则 #

把两个独立的闭合<path>放到同一个<g>标签里，通过fill-rule控制填充逻辑：

• 用fill-rule="evenodd"时，会交替填充路径的重叠区域，适合需要挖空内部的场景；
• 保持默认的nonzero则会根据方向判断填充区域。

示例代码：

<g fill="#ff4444" fill-rule="evenodd">
  <path d="M10,10 L50,10 L50,50 L10,50 Z" />
  <path d="M20,20 L40,20 L40,40 L20,40 Z" />
</g>

3. 把<line>转为闭合<path> #

如果你之前用的是<line>元素，一定要把它转换成闭合的<path>——因为开放的线条无法参与填充计算。比如把<line x1="10" y1="10" x2="50" y2="10" />改成带闭合逻辑的路径（如果是要形成边框的一部分，就衔接前后路径；如果是独立闭合线，就补全起点终点形成闭环）。

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