在svg中为四行之间的区域着色

除了在多边形中使用“填充”外，是否有其他方法可以为四个点之间的区域着色？ 我用四条线画了一个多边形

<line x1="0" y1="0" x2="300" y2="0" style="stroke:rgb(255,0,0);stroke-width:2"></line>
<line x1="300" y1="0" x2="300" y2="150" style="stroke:rgb(255,0,0);stroke-width:2"></line>
<line x1="300" y1="150" x2="0" y2="150" style="stroke:rgb(255,0,0);stroke-width:2"></line>
<line x1="0" y1="150" x2="0" y2="0" style="stroke:rgb(255,0,0);stroke-width:2"></line>

---

我想给这些线之间的区域涂上颜色。

不，没有，因为你没有真正的填充形状。你只有四条线碰巧相遇

使用

rect

将是更好的选择：

<rect x="0" y="0" width="300" height="150" fill="pink"/>

或者，您可以使用多段线并向其中添加填充，而不是绘制四条独立的直线：

<polyline points="0,0 300,0 300,150 0,150 0,0"
style="fill: pink; stroke:red; stroke-width: 1"/>

不使用多边形、多段线（或类似）和填充的唯一其他方法是使用宽笔划绘制一条直线：

<line x1="0" y1="75" x2="300" y2="75" style="stroke:red ;stroke-width:150"></line>

---

这假设填充颜色与笔划颜色相同。由于笔划一半在直线/形状内部，一半在外部，因此必须将直线的坐标设置为所需起点和笔划宽度之间距离的一半。此处笔划为150，我们希望它从0开始，因此y1和y2点设置为75。

请注意，即使使用

rect

、

polyline

或甚至

polygone

绘制，也可以使用

路径

。有关SVG元素和形状的详细教程，请参阅，以获取更多“原始”文档