如何填充SVG路径？无需转换为矩形的解决方案咨询

你的问题出在路径的命令结构上——你用了多个M（移动命令）来绘制矩形的四条边，这会创建四个独立的子路径（每条边都是单独的线段），而不是一个完整的闭合形状。即使最后加了Z，SVG也只会把每个子路径当作单独的线条，自然不会填充区域。

不用转换成<rect>元素的话，有个简单的修复方法：

• 合并路径命令，只保留第一个M：把后续的M全部改成L（线条命令），让整个路径成为一个连续的闭合形状。

修改前的路径：

<path stroke="black" stroke-width="10" fill="#666" d="M318237,48823 L321987,48823 M321987,48823 L321987,47323 M321987,47323 L318237,47323 M318237,47323 L318237,48823 Z" />

修改后的路径：

<path stroke="black" stroke-width="10" fill="#666" d="M318237,48823 L321987,48823 L321987,47323 L318237,47323 Z" />

这样修改后，路径会变成一个单一的闭合矩形，fill="#666"就能正常生效，同时保留你需要的描边样式。

原理是：SVG的填充只会作用于闭合的连续路径，多个M命令会把路径拆分成互不连接的片段，无法形成可填充的区域。通过合并成连续的L命令，我们让路径成为一个完整的闭合形状，填充规则就能正确识别并应用颜色了。

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