Colorare l'area tra le quattro linee in svg

Question

C'è un modo per colorare l'area tra quattro punti tranne usando 'riempimento' in poligono? ho disegnato un poligono con quattro linee come,

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

e voglio colorare l'area tra queste righe.

Answer 1

No, non c'è perché non hai una forma piena. Hai solo quattro righe che si incontrano.

Utilizzando un rect sarebbe una scelta migliore per questo:

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

http://jsfiddle.net/nfxTE/

O invece di fare quattro linee indipendenti, è possibile utilizzare una polilinea e aggiungere un riempimento che:

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

L'unico altro modo senza l'utilizzo di un poligono, polilinea (o simile) e riempire, è quello di eseguire una linea ad un'ampia corsa:

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

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

Ciò presuppone che il riempimento sarà lo stesso colore come il tratto. Poiché un tratto è metà interno e metà esterno alla linea/forma, è necessario impostare le coordinate della linea su metà della distanza tra il punto iniziale desiderato e la larghezza del tratto. Qui il colpo è 150 e vogliamo che inizi a 0, quindi i punti y1 e y2 sono settati a 75.