svgの4つの線の間の領域の塗りつぶし

Question

ポリゴンで '塗りつぶし'を使用する点を除いて、4点の間で領域を塗りつぶす方法はありますか？ 私は

<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本のラインを使用してポリゴンを描画されていると私はこれらの線の間の領域を色付けしたいです。

Answer 1

いいえあなたが実際に塗りつぶされた形をしていないわけではありません。あなたはちょうど会うために起こる4つのラインを持っています。

rectを使用すると、このためのより良いオプションのようになります。

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

http://jsfiddle.net/nfxTE/

またはその代わりに、4つの独立した系統をやって、あなたはポリラインを使用し、それに塗りつぶしを追加することができますが：

<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で、y1とy2の点は75に設定されているので、0から始めるようにします。