Tô màu vùng giữa bốn dòng trong svg

Question

Có cách nào tô màu vùng giữa bốn điểm ngoại trừ việc sử dụng 'điền' trong đa giác không? Tôi đã vẽ đa giác bằng bốn dòng như,

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

và tôi muốn tô màu vùng giữa các dòng này.

Answer 1

Không có không phải là bạn không thực sự có hình dạng đầy. Bạn chỉ có bốn dòng xảy ra để đáp ứng.

Sử dụng một rect sẽ là một lựa chọn tốt hơn cho việc này:

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

http://jsfiddle.net/nfxTE/

Hoặc thay vì làm bốn dòng độc lập, bạn có thể sử dụng một polyline và thêm một điền để rằng:

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

Cách duy nhất khác mà không sử dụng một đa giác, polyline (hoặc tương tự) và thực hiện, là để làm một dòng với một cơn đột quỵ rộng:

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

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

này giả định rằng các điền sẽ cùng màu như đột quỵ. Khi đột quỵ là một nửa bên trong và một nửa bên ngoài dòng/hình dạng, bạn phải thiết lập các tọa độ của đường là một nửa khoảng cách giữa điểm xuất phát mong muốn và chiều rộng của nét vẽ. Ở đây, hành trình là 150 và chúng tôi muốn nó bắt đầu ở 0 để các điểm y1 và y2 được đặt thành 75.