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

Question

除了在多边形中使用“填充”以外，是否可以对四个点之间的区域进行着色？
我用四条线绘制了一个多边形，

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

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

Answer 1

不，因为您没有真正的形状。您只有四行碰巧碰面。

为此，使用rect是一个更好的选择:

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

http://jsfiddle.net/nfxTE/

或者，您可以使用折线并在其中添加填充来代替四条独立的线:

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

http://jsfiddle.net/nfxTE/2/

不使用多边形，折线(或类似线)和填充的唯一其他方法是用较宽的笔划画一条线:

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

http://jsfiddle.net/nfxTE/1/

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