segi empat tepat SVG
Bentuk SVG
SVG mempunyai beberapa elemen bentuk pratakrif yang boleh digunakan dan dimanipulasi oleh pembangun:
Segi empat tepat < betul>
bulatan<bulatan>
elips<elips>
garis<
polyline<polyline>
polygon<polygon>
Path<🎜>Path<🎜 >
SVG Rectangle - <rect>Contoh 1<rect> boleh digunakan untuk membuat segi empat tepat, serta varian segi empat tepat: Berikut ialah kod SVG:
Instance
Run Instance»Klik butang "Run Butang Instance" untuk melihat contoh dalam talian
Untuk pengguna Opera: Lihat fail SVG (klik kanan pada sumber pratonton grafik SVG). <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /> </svg> </body> </html>
Run Instance»Klik butang "Run Butang Instance" untuk melihat contoh dalam talian
Analisis kod:
- Atribut lebar dan tinggi elemen tegak boleh menentukan ketinggian dan lebar segi empat tepat
- Atribut gaya digunakan untuk mentakrifkan sifat CSS
- Atribut isian CSS mentakrifkan warna isian bagi segi empat tepat (nilai rgb, nama warna atau nilai perenambelasan)
- Sifat lejang CSS mentakrifkan lebar sempadan segi empat tepat
- Sifat lejang CSS mentakrifkan warna sempadan segi empat tepat
Contoh 2Mari kita lihat contoh lain yang mengandungi beberapa atribut baharu: Berikut ialah kod SVG:
Contoh
Jalankan Instance»Klik butang "Run Instance" untuk melihat contoh dalam talian
Untuk pengguna Opera: Lihat fail SVG (klik kanan Klik pada grafik SVG untuk pratonton sumber). <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" /> </svg> </body> </html>
Jalankan Instance»Klik butang "Run Instance" untuk melihat contoh dalam talian
Analisis kod:
- atribut x mentakrifkan kedudukan kiri segi empat tepat (contohnya, x="0" mentakrifkan segi empat tepat kepada kiri tetingkap penyemak imbas Jarak dari sisi ialah 0px)
- Atribut y mentakrifkan kedudukan atas segi empat tepat (contohnya, y="0" mentakrifkan jarak dari segi empat tepat ke bahagian atas tetingkap penyemak imbas menjadi 0px)
- Atribut kelegapan isian CSS mentakrifkan ketelusan warna isian (julat undang-undang ialah: 0 - 1)
- Atribut kelegapan lejang CSS mentakrifkan ketelusan warna lejang (Julat undang-undang ialah: 0 - 1)
Contoh 3Tentukan kelegapan keseluruhan elemen: Berikut ialah kod SVG :
Instancerreee
Jalankan Instance»Klik butang "Run Instance" untuk melihat contoh dalam talian
Run Instance»
Jalankan Instance»Klik butang "Run Instance" untuk melihat contoh dalam talian
Untuk pengguna Opera: Lihat fail SVG (klik kanan pada sumber pratonton grafik SVG).
Sifat kelegapan CSS mentakrifkan nilai ketelusan elemen (julat: 0 hingga 1).
Contoh 4
Contoh terakhir, buat segi empat tepat bulat:
Berikut ialah kod SVG:
Instance
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" /> </svg> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Untuk Pengguna Opera : Lihat fail SVG (klik kanan pada sumber pratonton grafik SVG).
Atribut rx dan ry boleh menjadikan segi empat tepat mempunyai bucu bulat.
