Di antara tag bentuk SVG, path adalah yang paling kuat, dan menguasai jalur sudah cukup untuk mengatasi masalah menggambar umum.
Mari kita lihat penggunaan dasar tag jalur terlebih dahulu:
<path d="M100,100 L200,200 L200,400" fill="#333" stroke="#000" />
Tag jalur mendefinisikan jalur melalui properti d, yang mendefinisikan informasi yang terdiri dari string, dan jalur juga dapat ditentukan oleh atribut isian dan goresan untuk menentukan isian dan batas.
Informasi atribut d sebenarnya tidak rumit, terdiri dari huruf dan angka, angka mewakili titik koordinat, dan huruf bertanggung jawab untuk mewakili cara menghubungkan titik-titik koordinat ini. Misalnya, dalam contoh di atas, M mewakili titik awal dan L mewakili koneksi garis lurus, sehingga informasi d dapat ditafsirkan seperti ini:
M100.100 -> dimulai pada titik koordinat (100.100)
L200.200 -> Gambar garis lurus dari (100.100) hingga (200.200).
L200.400 -> Gambar garis lurus dari (200.200) hingga (200.400).
Dalam atribut d tag jalur, ada total 10 perintah yang dapat digunakan, dan 5 perintah berikut bersifat dasar dan relatif sederhana.
M berpindah ke (moveTo) koordinat titik awal x,y
Z closepath menghubungkan titik awal dan akhir jalur dalam garis lurus
L lineTo: Node saat ini terhubung dalam garis lurus ke node (x,y) yang ditentukan
H garis horizontal x menjaga koordinat y dari titik saat ini tetap konstan, dan sumbu x bergerak ke x, membentuk garis horizontal
Garis vertikal V y menjaga koordinat x dari titik saat ini tidak berubah, dan sumbu y bergerak ke y, membentuk garis vertikal
M dan L
Mari kita lihat contoh lain dari M dan L
<jalur d="M30,30 L170,30 L30,170 L170,170"></path>
Dari titik A (30, 30), garis lurus ditarik ke titik B (170, 30), kemudian lurus ke titik C (30, 170), dan kemudian lurus ke titik D (170, 170), dan akhirnya membentuk jalur berbentuk Z.
Efek isian, dan Z
<jalur d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="kuning"></path>
Ada dua M dalam deskripsi jalur ini, jadi dalam satu jalur, dua jalur yang relatif independen muncul, jalur pertama sama dengan contoh di atas, yaitu berbentuk Z.
Jalur kedua adalah persegi panjang dengan perintah Z yang muncul dalam deskripsi, menunjukkan bahwa itu menghubungkan awal dan akhir jalur.
Selain itu, di sini kami mendefinisikan properti fill untuk jalur, dan Anda dapat melihat bahwa fill akan berlaku terlepas dari apakah jalur ditutup atau tidak.
H dan V
Terakhir, mari kita lihat dua perintah H dan V, yang sebenarnya merupakan singkatan dari perintah L ketika sumbu x atau y tetap tidak berubah, sehingga dua ujung berikut dijelaskan dan gambar yang digambar sama.
<jalur d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="kuning"></path>
<jalur d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fill="kuning"></path>
|
Diposting pada 14/08/2017 13.15.15
|
|
|
