Segi Empat SVG dan Bentuk SVG Lain

Beberapa bentuk boleh dibuat menggunakan lukisan SVG. Lukisan SVG dapat menggunakan dan menggabungkan tujuh bentuk: Path, Rectangle, Circle, Ellipse, Line, Polyline, and Polygon.

Jalan

The pathelemen adalah yang paling biasa dilihat, dan biasanya dihasilkan oleh program yang direka untuk kod eksport SVG.

Contoh di pathatas akan menghasilkan symbole “plus” (+) ketika digunakan di dalam gambar SVG. pathElemen SVG tidak dibina secara manual, tetapi dihasilkan melalui program reka bentuk yang dapat memanipulasi grafik vektor, seperti Illustrator atau Inkscape.

Segi empat tepat

Elemen segi empat tepat rectmelukis sebuah segi empat tepat pada layar, dan ia menerima enam atribut.

xdan ytetapkan kedudukan sudut kiri atas segi empat tepat, widthdan heighttetapkan ukuran segi empat tepat. rxdan rytetapkan jejari sudut segiempat sama dengan sifat jejari-jejari CSS.

Bulatan

Unsur bulatan circlemenerima tiga sifat.

cxdan cytetapkan kedudukan pusat bulatan, dan tetapkan rjejari (ukuran) bulatan.

Elips

Elemen elips, ellipsemirip dengan circleelemen kecuali radius terbahagi kepada dua atribut.

Sekali lagi, cxdan cytetapkan kedudukan pusat elips, dan sekarang rxdan rytetapkan jejari mendatar dan menegak elips, masing-masing. Yang lebih besar rxakan memberikan elips "lemak", dan yang lebih besar ryakan memberikan elips yang lebih kurus. Sekiranya rxdan rysama, ia akan membentuk bulatan.

Garisan

The lineelemen adalah mudah, dan menerima empat sifat-sifat.

Yang x1dan y1sifat-sifat memberikan mata pertama barisan, dan x2dan y2sifat-sifat menetapkan titik kedua barisan.

Garis poli

A polylineadalah satu siri garis lurus yang dihubungkan, diberikan dalam satu atribut.

The pointspenerima serah hak atribut senarai mata, setiap titik dipisahkan oleh koma.

Poligon

The polygonunsur juga satu siri garis lurus berhubung, tetapi dalam kes ini, baris terakhir secara automatik akan menyambung semula ke titik permulaan.

Contoh ini akan menarik bentuk yang sama seperti di polylineatas, tetapi akan menarik garis tambahan untuk "menutup" rangkaian garis.

Maklumat lanjut

Dokumentasi MDN: MDN