SVG şekil etiketleri arasında yol en güçlüsüdür ve mastering path yaygın çizim problemlerini çözmek için yeterlidir.
Önce yol etiketinin temel kullanımına bakalım:
<path d="M100,100 L200,200 L200,400" fill="#333" stroke="#000" />
Yol etiketi, d özelliği üzerinden yolu tanımlar; bu özellik bir diziden oluşan bilgiyi tanımlar; ayrıca yol dolgu ve çizgi öznitelikleriyle de dolgu ve sınırı tanımlayabilir.
d özniteliğinin bilgisi aslında karmaşık değildir, harfler ve sayılardan oluşur, sayılar koordinat noktalarını temsil eder ve harfler bu koordinat noktalarının nasıl bağlanacağını temsil eder. Örneğin, yukarıdaki örnekte, M başlangıç noktasını, L ise düz bir çizgi bağlantısını temsil eder; d'nin bilgisi şu şekilde yorumlanabilir:
M100,100 -> (100,100) koordinat noktasından başlar
L200.200 -> (100.100)'den (200.200)'e doğru bir çizgi çizin.
L200.400 -> (200.200)'den (200.400)'e doğru bir çizgi çizin.
Yol etiketinin d niteliğinde toplam 10 komut kullanılabilir ve aşağıdaki 5 komut temel ve nispeten basittir.
M x,y başlangıç noktası koordinatlarına (moveTo) taşınır
Z yakın yolu, yolun başlangıç ve bitiş noktalarını düz bir çizgi içinde birbirine bağlar
L lineTo: Mevcut düğüm, belirtilen (x,y) düğüme düz bir çizgi olarak bağlıdır
H yatay çizgi x mevcut noktanın y koordinatını sabit tutar ve x ekseni x'e geçerek yatay bir çizgi oluşturur
V dikey çizgi y mevcut noktanın x koordinatlarını değiştirmez ve y ekseni y'ye hareket ederek dikey bir çizgi oluşturur
M ve L
M ve L örneklerine başka bir bakalım
<path d="M30,30 L170,30 L30,170 L170,170"></path>
A noktasından (30, 30) düz çizgi B noktasına (170, 30), sonra C noktasına (30, 170) ve ardından D noktasına (170, 170) doğru çizilir ve sonunda Z şeklinde bir yol oluşturur.
Dolgu etkisi ve Z
<yol d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="sarı"></path>
Bu yol açıklamasında iki M vardır, yani bir yolda iki nispeten bağımsız yol belirir, ilk yol yukarıdaki örnekle aynıdır ve Z şeklindedir.
İkinci yol, açıklamada Z komutunun göründüğü bir dikdörtgendir; bu komutun yolun başlangıcı ile sonunu birbirine bağladığını gösterir.
Ayrıca, burada yol için dolgu özelliğini tanımlıyoruz ve dolgunun, yolun kapalı olup olmadığına bakılmaksızın etki göstereceğini görebilirsiniz.
H ve V
Son olarak, x veya y ekseni değişmediğinde aslında L komutunun kısaltması olan H ve V komutlarına bakalım; böylece sonraki iki uç tanımlanır ve çizilmiş resim aynıdır.
<yol d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="sarı"></path>
<yol d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fill="sarı"></path>
|
Yayınlandı 14.08.2017 13:15:15
|
|
|
