Coloring the area between four lines in svg

Question

Is there a way to color the area between four points other than using "fill" in the polygon? I drew a polygon using four lines, like

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

and I want to color the area between these lines.

Answer 1

No, no, because you really don't have a completed form. You just have four lines that meet.

Using rect would be a better option for this:

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

http://jsfiddle.net/nfxTE/

Or instead of four independent lines, you can use a polyline and add the following to it:

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

The only other way without using a polygon, polyline (or similar) and filling is to make one line with a wide stroke:

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

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

This assumes that the fill will be the same color as the stroke. Since the stroke is half inside and half outside the line / shape, you need to set the line coordinates to half the distance between the desired starting point and the stroke width. Here the move is 150, and we want it to start at 0, so the points y1 and y2 are set to 75.