着色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.