jalan SVG
SVG path - <path>
<Lintasan> elemen digunakan untuk mendefinisikan jalan.
Perintah berikut dapat digunakan untuk rute Data:
- M = MoveTo
- L = LineTo
- H = LineTo horisontal
- V = LineTo vertikal
- C = curveto
- S = halus curveto
- Q = kurva Bezier kuadrat
- T = halus kuadrat Bezier curveto
- A = elips Arc
- Z = closepath
Catatan: Semua perintah di atas memungkinkan huruf kecil. Modal merupakan posisi absolut, relatif posisi menunjukkan huruf kecil.
contoh 1
Contoh di atas mendefinisikan path yang dimulai pada posisi 1500, mencapai posisi 75200, dan kemudian dari sana ke 225 200 pada tahun 1500 dan jalur akhirnya tertutup.
Berikut adalah Kode SVG:
contoh
<Jalur d = "M150 0 L75 200 L225 200 Z" />
</ Svg>
Coba »
Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).
contoh 2
Menggunakan kurva Bezier Model kurva halus yang dapat ditingkatkan tanpa batas. Dalam keadaan normal, pengguna memilih satu atau dua titik akhir dan dua titik kontrol. Sebuah titik kontrol dari kurva Bezier yang disebut kurva Bezier kuadrat dan dua titik kontrol disebut batu.
Contoh berikut membuat kurva Bezier kuadrat, A dan C adalah titik awal dan akhir, B adalah titik kontrol:
Berikut adalah Kode SVG:
contoh
<Jalur id = "lineAB" d = "M 100 350 l 150 -300" Stroke = "red"
stroke width = "3" isi = "none" />
<Jalur id = "lineBC" d = "M 250 50 l 150 300" Stroke = "red"
stroke width = "3" isi = "none" />
<Jalur d = "M 175 200 l 150 0" Stroke = "green" stroke width = "3"
mengisi = "none" />
<Jalur d = "M 100 350 q 150 -300 300 0" Stroke = "biru"
stroke width = "5" isi = "none" />
<! - Mark poin yang relevan ->
<G Stroke = "hitam" stroke width = "3" isi = "hitam">
<Lingkaran id = "pointA" cx = "100" cy = "350" r = "3" />
<Lingkaran id = "pointB" cx = "250" cy = "50" r = "3" />
<Lingkaran id = "pointC" cx = "400" cy = "350" r = "3" />
</ G>
<! - Label poin ->
<G font-size = "30" Font = "sans-serif" isi = "hitam" Stroke = "none"
text-anchor = "tengah">
<Text x = "100" y = "350" dx = "- 30"> A </ text>
<Text x = "250" y = "50" dy = "- 10"> B </ text>
<Text x = "400" y = "350" dx = "30"> C </ text>
</ G>
</ Svg>
Coba »
Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).
Rumit? Ya! ! Karena ketika menggambar kompleksitas jalan, sangat disarankan untuk menggunakan SVG editor untuk membuat grafis kompleks.