如何填写SVG路径？

我创建了这个svg：

如果您查看源代码，您可以看到每个路径如下所示

<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" />

---

但是，svg仍然只有细线，并且每个矩形路径仍然没有填充。有没有一种方法可以在不将路径转换为矩形的情况下执行此操作？

我相信您的路径不是闭合的，因此无法填充

让我们看一个路径定义：

M318237,48823 L321987,48823 M321987,48823 L321987,47323 M321987,47323 L318237,47323 M318237,47323 L318237,48823 Z

每个

M

意味着移动到一个点，

L

意味着画一条线到一个指定点

Z

表示关闭当前子路径

任何以

M

开头的内容都会启动一个新的子路径。例如：

M318237,48823 L321987,48823

是一条画线的子路径

M321987,48823 L321987,47323

绘制另一条线，但不将其连接到上一个子路径，从而创建未闭合的路径。应该是：

M318237,48823 L321987,48823 L321987,47323

等等

全封闭路径：

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

最后一行

l31823748823

可以省略，因为

Z

就是这样做的

---

使用

H

和

V

命令也可以简化定义，因为您只有直的水平线/垂直线。

因此，如果我只删除第2、第3和第4个M，应该会使它们成为闭合路径？@BigBoy1337<代码>M正在移动到新位置，开始新路径。否则，从当前位置继续使用当前路径。还要注意的是，

Z

从最后一个位置到路径起点绘制了一条线，因此实际上不需要最后一条线。