9

除了在多边形中使用“填充”之外,还有什么方法可以为四个点之间的区域着色?我用四条线绘制了一个多边形,

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

我想为这些线之间的区域着色。

4

1 回答 1

6

不,没有,因为你并没有真正的填充形状。你只有四行碰巧相遇。

使用 arect将是一个更好的选择:

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

于 2013-05-16T22:13:14.320 回答