Javascript 带有填充、笔划和笔划宽度的SVG形状

我有一个多边形形状与边界，笔划宽度和填充颜色

我正在寻找多个多边形形状；下面是其中一个，有4条边。其中3条边只有笔划，另一条边有填充颜色

从上图中，我们看到多边形的一侧带有填充和笔划，其他一侧只带有笔划宽度1

我对SVG很陌生。绘制此形状的最佳方法是什么

---

路径、直线、多边形或其组合？填写规则在这里有用吗？请给我一些建议。

路径和矩形的组合很可能就是你最终得到的。我发现显式填充更容易，因为如果需要，直接使用JavaScript更容易操作

这里有一个解决方案。我发现在工作中，尽可能简单的事情会让你的生活更轻松

我的矢量图像
第一层

使用InkScape绘制此图，然后根据需要调整输出。两者都可以是路径吗？。在过渡期间，我希望将这些笔划转换为填充形状。我是说三条边@RandyCasburn（a）这里不需要三条路径。您只需要一条路径。（b） 是的，没有理由不能同时使用填充边和未填充边的路径。是的。。。所有这些都可以是路径。我只是很快地把这些放在一起，给你们一个起点。