在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

没有,因为你没有真正的填充形状.你只有四条线碰巧遇见了.

使用a 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.