Coloring the area between four lines in svg

Question

Is there any way to color the area between four points except using 'fill' in polygon? I have drawn a polygon using four lines as,

<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 there isn't as you don't really have a filled in shape. You just have four lines that happen to meet up.

Using a 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 doing four independent lines, you could use a polyline and add a fill to that:

<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 fill, is to do 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 colour as the stroke. As a stroke is half inside and half outside the line/shape, you have to set the co-ordinates of the line to be half the distance between the desired starting point and the width of the stroke. Here the stroke is 150 and we want it to start at 0 so the y1 and y2 points are set to 75.