SVG Stroke Properti
SVG Stroke Properti
SVG menawarkan berbagai atribut stroke. Dalam bab ini, kita akan melihat berikut:
- tak
- stroke lebar
- stroke linecap
- stroke dasharray
Semua atribut stroke dapat diterapkan untuk semua jenis garis, teks dan unsur-unsur seperti garis melingkar.
Properti Stroke SVG
atribut Stroke mendefinisikan garis, atau warna teks elemen garis:
Berikut adalah Kode SVG:
contoh
<G mengisi = "none">
<Jalur Stroke = "red" d = "M5 20 l215 0" />
<Jalur Stroke = "biru" d = "M5 40 l215 0" />
<Jalur Stroke = "hitam" d = "M5 60 l215 0" />
</ G>
</ Svg>
Coba »
Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).
SVG stroke lebar atribut
Tstroke- atribut lebar menentukan garis, atau ketebalan teks elemen garis:
Berikut adalah Kode SVG:
contoh
<G mengisi = "none" Stroke = "hitam">
<Jalur stroke width = "2" d = "M5 20 l215 0" />
<Jalur stroke width = "4" d = "M5 40 l215 0" />
<Jalur stroke width = "6" d = "M5 60 l215 0" />
</ G>
</ Svg>
Coba »
Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).
SVG properti stroke linecap
atribut strokelinecap mendefinisikan akhir jalan terbuka dari berbagai jenis:
Berikut adalah Kode SVG:
contoh
<G mengisi = "none" Stroke = "hitam" stroke width = "6">
<Jalur stroke linecap = "pantat" d = "M5 20 l215 0" />
<Jalur stroke linecap = "round" d = "M5 40 l215 0" />
<Jalur stroke linecap = "persegi" d = "M5 60 l215 0" />
</ G>
</ Svg>
Coba »
Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).
SVG properti stroke dasharray
strokedasharray properti yang digunakan untuk membuat garis putus-putus:
Berikut adalah Kode SVG:
contoh
<G mengisi = "none" Stroke = "hitam" stroke width = "4">
<Jalur stroke dasharray = "5,5" d = "M5 20 l215 0" />
<Jalur stroke dasharray = "10,10" d = "M5 40 l215 0" />
<Jalur stroke dasharray = "20,10,5,5,5,10" d = "M5 60 l215 0" />
</ G>
</ Svg>
Coba »
Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).