Dört satırda alanın svg olarak renklendirilmesi

Question

Çokgenin içinde 'doldurun' kullanılması dışında dört nokta arasındaki bölgeyi renklendirmenin bir yolu var mı? Ben dört satırlık kullanarak bir çokgen,

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

çizilmiş ve ben bu çizgiler arasındaki bölgeyi renklendirmek istiyorum.

Answer 1

Gerçekten doldurulan formunuz olmadığından yok yok. Sadece buluşmak için dört satırın var. ,

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

http://jsfiddle.net/nfxTE/

Veya bunun yerine dört bağımsız çizgiler yapmanın bir çoklu çizgiyi kullanmak ve bu dolgu ekleyebilirsiniz:

bir rect kullanarak bunun için daha iyi bir seçenek olacaktır

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

Bir çokgen çoklu çizgiyi kullanarak (veya benzeri) ve dolgu olmadan sadece diğer yolu, geniş darbe ile bir satır yapmaktır:

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

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

Bu dolgu aynı renkte olacaktır varsayar inme olarak. Bir inme yarısı içeride ve yarısı çizginin/şeklin dışında olduğu için, çizginin koordinatlarını, istenen başlangıç ​​noktası ile strokun genişliği arasındaki mesafenin yarısı kadar olacak şekilde ayarlamanız gerekir. Burada vuruş 150 ve 0'dan başlamasını istiyoruz, böylece y1 ve y2 noktaları 75 olarak ayarlanmış.