Banyak elemen asas telah diperkenalkan sebelum ini, termasuk gabungan berkaitan struktur dan elemen guna semula Di sini kami akan meringkaskan secara ringkas baki elemen berkaitan dalam struktur dokumen SVG, dan kemudian bergerak ke hadapan untuk menghargai ciri SVG yang lain.
Elemen dokumen SVG pada asasnya boleh dibahagikan kepada kategori berikut:
•Elemen animasi: animate, animateColor, animateMotion, animateTransform, set; •Elemen Grafik: bulatan, elips, garis, laluan, poligon, poligaris, tegak
• Unsur struktur: def, g, svg, simbol,
• Elemen kecerunan: kecerunan linear, radialGradient; Elemen lain：a,altGlyphDef,clipPath,profil warna,kursor,penapis,fon,muka fon,Objek asing,imej,penanda,topeng,corak,skrip,gaya,suis,teks,pandangan, dsb.
Antaranya, elemen grafik, elemen kecerunan, teks, elemen imej dan gabungan semuanya telah diperkenalkan Berikut adalah beberapa elemen lain yang berkaitan dengan struktur.
Elemen View-svg
Anda boleh meletakkan sebarang elemen lain dalam sebarang susunan dalam elemen svg, termasuk elemen svg bersarang. Atribut yang biasa digunakan yang disokong oleh elemen svg ialah id, kelas, x, y, lebar, tinggi, kotak pandangan, preserveAspectRatio dan atribut isian dan lejang yang berkaitan. Acara yang disokong oleh elemen svg juga biasa digunakan onload, onmouseover, onmouseover, onmousedown, onmouseup, onclick, onfocusin, onfocusout, onresize, onscroll, onunload, dsb. Tidak banyak yang boleh dikatakan tentang elemen svg Untuk senarai lengkap atribut dan peristiwa, sila rujuk dokumentasi rasmi kemudian.
Elemen penerangan-unsur desc dan elemen tajuk
Setiap elemen bekas (elemen yang boleh mengandungi elemen bekas atau elemen grafik lain, seperti: a, defs, glyph, g, Penanda, topeng, glif hilang, corak, svg, suis dan simbol) dan elemen grafik boleh mengandungi elemen desc dan tajuk, yang kedua-duanya adalah elemen tambahan yang digunakan untuk menerangkan situasi berkaitan kandungannya ialah teks . Apabila dokumen SVG diberikan, kedua-dua elemen ini tidak akan dipaparkan ke dalam grafik. Perbezaan antara kedua-dua elemen ini tidak terlalu besar Dalam sesetengah pelaksanaan, tajuk muncul sebagai maklumat segera, jadi tajuk biasanya diletakkan di kedudukan pertama elemen induk. Penggunaan biasa adalah seperti berikut:
;title>Companysalesbyregion< ;/title>
Biasanya, elemen svg paling luar hendaklah disertakan dengan penerangan tajuk, supaya program lebih mudah dibaca.
Elemen penanda-penanda
Penanda mentakrifkan elemen grafik (anak panah dan penanda berbilang titik) yang dilampirkan pada satu atau lebih bucu (laluan, garisan, poligaris atau bucu poligon) ). Anak panah boleh dibuat dengan melampirkan penanda pada titik mula atau tamat laluan, garisan atau garis poli. Penanda berbilang titik boleh melampirkan penanda pada semua bucu laluan, garisan, poligaris atau poligon. Tanda
ditakrifkan oleh elemen penanda, dan kemudian hanya tetapkan atribut yang berkaitan (penanda, penanda-mula, penanda-pertengahan dan penanda-hujung) dalam laluan, garisan, poligon atau poligon. Ambil contoh:
Salin kod
Kodnya adalah seperti berikut:
< ;svgwidth=" 4in"height="2in" theendofarrowhead. ;/desc>
fill="none"stroke="black"stroke-width="100"
marker-end="url(#Triangle)"/> ;
Mari kita lihat secara terperinci pengetahuan berkaitan penanda:
1 Penanda ialah elemen bekas yang boleh menyimpan elemen grafik, elemen bekas, animasi, elemen kecerunan, dll. dalam sebarang susunan.
2. Elemen penanda boleh mencipta tetingkap paparan baharu: tetapkan nilai Kotak paparan.
3. Atribut Penanda yang lebih penting:
markerUnits="strokeWidth|userSpaceOnUse"
Atribut ini mentakrifkan sistem koordinat yang digunakan oleh atribut markerWidth, markerHeight dan kandungan penanda. Atribut ini mempunyai dua nilai pilihan Nilai pertama, strokeWidth, ialah nilai lalai, yang bermaksud bahawa unit sistem koordinat yang digunakan oleh atribut markerWidth, markerHeight dan kandungan penanda adalah sama dengan nilai yang ditetapkan oleh stroke- lebar elemen grafik yang merujuk kepada penanda.
Sebagai contoh, dalam contoh di atas, lebar elemen penanda ialah 400 dan ketinggian ialah 300. Walau bagaimanapun, jangan keliru Koordinat yang digunakan oleh laluan dalam elemen tanda ialah koordinat pengguna baharu sistem yang ditetapkan oleh kotak pandangan.
Satu lagi nilai atribut ini ialah userSpaceOnUse, yang bermaksud bahawa atribut markerWidth, markerHeight dan kandungan penanda menggunakan sistem koordinat elemen grafik yang merujuk kepada penanda.
refX, refY: Tentukan koordinat kedudukan titik rujukan yang sejajar dengan penanda. Sebagai contoh, dalam contoh di atas, titik yang dirujuk ialah titik akhir, dan ia harus diselaraskan dengan kedudukan (0,5) penanda. Ambil perhatian bahawa refX dan refY menggunakan sistem koordinat pengguna akhir yang diubah oleh kotak pandangan.
markerWidth, markerHeight: Lebar dan ketinggian tetingkap penanda Ini mudah difahami.
orient: mentakrifkan sudut putaran penanda. Anda boleh menentukan sudut atau menetapkan auto secara langsung.
auto bermaksud arah positif paksi-x diputar mengikut peraturan berikut :
a Jika titik di mana penanda terletak hanya tergolong dalam satu laluan, x positif -arah paksi penanda adalah sama dengan arah laluan. Lihat contoh di atas.
b. Jika titik di mana penanda terletak tergolong dalam dua laluan yang berbeza, maka arah paksi-x positif penanda adalah konsisten dengan pembahagi dua sudut antara dua laluan.
4. Atribut penanda elemen grafik
Jika elemen grafik ingin merujuk penanda, ia perlu menggunakan atribut yang berkaitan, terutamanya ketiga-tiga ini: penanda-mula (letakkan penanda yang dirujuk pada titik permulaan) , penanda- pertengahan (letak penanda yang dirujuk pada semua titik kecuali titik permulaan dan titik akhir), penanda-akhir (letak penanda yang dirujuk pada titik akhir). Nilai bagi ketiga-tiga atribut ini mungkin tiada (bermaksud tidak merujuk kepada penanda), rujukan penanda (merujuk kepada penanda tertentu), dan mewarisi (tidak perlu mengatakan lebih lanjut mengenai perkara ini).
Anda juga boleh melihat penggunaan penanda daripada contoh di atas.
Elemen skrip dan gaya-skrip dan elemen gaya
Malah, pada asasnya semua atribut (untuk semua elemen, bukan hanya teks) boleh dikaitkan dengan elemen menggunakan CSS, Dan semua Sifat CSS tersedia dalam imej SVG. Anda boleh terus menggunakan atribut gaya untuk menggayakan elemen, atau merujuk kepada helaian gaya untuk menggayakan elemen. Lembaran gaya tidak boleh dihuraikan untuk fail XML (kerana kadangkala ia mengandungi aksara yang boleh menyebabkan masalah), jadi ia perlu diletakkan dalam bahagian XMLCDATA. Begitu juga dengan skrip, yang perlu diletakkan di bahagian XMLCDATA. Lihat contoh CSS berikut:
Teks 🎜>
.singkatan{text-decoration:underline;}
]]>
< /defs>
="20"y ="100"font-size="30">oleh mereka
R >G
Bnilai
ataubykeywordssuchas
lightsteelblue,
< /svg>
Lihat contoh skrip sekali lagi:
Salin kod
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
