SVG Baris - <garis>
The <baris> elemen digunakan untuk membuat garis:
<svg width="100" height="100">
<line x1="0" y1="0" x2="100" y2="100" style="stroke:red;stroke-width:2;"/>
</svg>
Kode penjelasan:
- X1 atribut mendefinisikan awal baris pada sumbu x
- Y1 atribut mendefinisikan awal baris pada sumbu y
- x2 atribut mendefinisikan akhir baris pada sumbu x
- Y2 atribut mendefinisikan akhir baris pada sumbu y
SVG Polygon - <polygon>
The <poligon> elemen digunakan untuk membuat grafis yang mengandung setidaknya tiga sisi.
Poligon terbuat dari garis-garis lurus, dan bentuk yang "tertutup" (semua baris menghubungkan).
Polygon berasal dari bahasa Yunani. "Poly" berarti "banyak" dan "gon" berarti "sudut".
Contoh 1
Contoh berikut membuat poligon dengan tiga sisi:
<svg width="500" height="210">
<polygon points="200,10,250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1;"/>
</svg>
Kode penjelasan:
- Points atribut mendefinisikan x dan y koordinat untuk setiap sudut poligon
Contoh 2
Contoh berikut membuat poligon dengan empat sisi:
<svg width="500" height="210">
<polygon points="200,10,250,190 160,210 130,200" style="fill:lime;stroke:purple;stroke-width:1;"/>
</svg>
Contoh 3
Gunakan <poligon> elemen untuk membuat bintang:
<svg width="500" height="210">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
</svg>
Contoh 4
Mengubah properti mengisi-aturan untuk "evenodd":
<svg width="500" height="210">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg>
0 komentar:
Posting Komentar