Kolorowanie obszaru między czterema liniami w svg

Question

Czy istnieje sposób na kolorowanie obszaru między czterema punktami, z wyjątkiem opcji wypełnienia wielokąta? mam wyciągnąć wielokąt korzystając cztery linie jak

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

i chcę pokolorować obszar pomiędzy tymi liniami.

Answer 1

Nie, nie ma, ponieważ nie masz naprawdę wypełnionego kształtu. Masz tylko cztery linie, które się spotykają.

Korzystanie rect byłoby lepszym rozwiązaniem dla tego:

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

http://jsfiddle.net/nfxTE/

Albo zamiast robić cztery niezależne linie, można użyć łamaną i dodać wypełnienie do:

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

Jedyny inny sposób bez użycia wielokąt, polilinię (lub podobny) i wypełnić, jest zrobić jedną linię z szerokim udaru:

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

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

ta zakłada, że ​​wypełnienie będzie taki sam kolor jako udar. Ponieważ obrys znajduje się w połowie w środku, a połowa poza linią/kształtem, musisz ustawić współrzędne linii na połowę odległości między żądanym punktem początkowym a szerokością obrysu. Tutaj skok wynosi 150 i chcemy, aby zaczynał się od 0, więc punkty y1 i y2 są ustawione na 75.