HTML5 SVG 2D Pendahuluan 8 - Struktur Dokumen dan Ringkasan Elemen Terkait

Penulis：Eve Cole Waktu Pembaruan：2025-04-10 04:16:01

Saya telah memperkenalkan banyak elemen dasar, termasuk kombinasi terkait struktur dan elemen penggunaan kembali. Di sini saya akan merangkum secara singkat elemen -elemen terkait yang tersisa dalam struktur dokumen SVG, dan kemudian terus menghargai fitur SVG lainnya.

Elemen -elemen dokumen SVG pada dasarnya dapat dibagi menjadi kategori berikut:

• Elemen Animasi: Animasi, Animatecolor, Animatemotion, Animatetransform, Set;

• Elemen Penjelasan: Desc, Metadata, Judul;

• Elemen grafis: lingkaran, elips, garis, jalur, poligon, polyline, rect;

• Elemen Struktural: DEFS, G, SVG, Simbol, Penggunaan;

• Elemen Gradien: Lineargradient, RadialGradient;

• Elemen lain: A, AltglyphDef, Clippath, Profil Warna, Kursor, Filter, Font, Font-Face, Luar Negeri, Gambar, Marker, Topeng, Pola, Skrip, Gaya, Saklar, Teks, Tampilan, Dll.

Di antara mereka, elemen grafis, elemen gradien, teks, elemen gambar dan kombinasi telah diperkenalkan. Berikut ini adalah beberapa elemen lain yang terkait dengan struktur.

Elemen Window-SVG

Elemen lain dapat ditempatkan dalam urutan apa pun di elemen SVG, termasuk elemen SVG bersarang.

Properti yang didukung oleh elemen SVG umumnya digunakan, yaitu ID, kelas, x, y, lebar, tinggi, viewbox, pelestarian spektratio, dan atribut terkait mengisi dan stroke.

Acara yang didukung oleh elemen SVG juga umumnya digunakan onload, onmouseover, onmouseMove, onmousedown, onmouseup, onClick, onfocusin, onFocusout, onResize, oncroll, onunload, dll. Saya tidak akan berbicara tentang elemen SVG. Untuk atribut lengkap dan daftar acara, silakan merujuk ke dokumentasi resmi di bawah ini.

Elemen Penjelasan - Elemen Desc dan Elemen Judul

Setiap elemen wadah (yang dapat berisi elemen kontainer lain atau elemen elemen grafis, seperti: A, DEFS, GLYPH, G, Marker, Topeng, Hilang Glyph, Pattern, SVG, Switch and Symbol) dan elemen grafis dapat berisi elemen desc dan judul. Kedua elemen ini adalah elemen tambahan dan digunakan untuk menjelaskan situasi yang relevan; Konten mereka adalah teks. Ketika dokumen SVG diterjemahkan, kedua elemen ini tidak akan diterjemahkan ke dalam grafik. Perbedaan antara kedua elemen tidak terlalu besar. Judul muncul sebagai pesan cepat dalam beberapa implementasi, sehingga judul biasanya ditempatkan pada posisi pertama elemen induk.

Penggunaan tipikal adalah sebagai berikut:

<g>

<title> companyesbyregion </iteme>

<desc>

Thisabarchart yang menunjukkan

Companyesbybyregion.

</desc>

<!-BarchartdefinedaSvectordata->

</g>

</svg>

Secara umum, elemen SVG terluar harus disertai dengan deskripsi judul, sehingga program dapat dibaca lebih baik.

Elemen penanda

Tag mendefinisikan elemen grafis (panah dan penanda multi-titik) yang terpasang pada satu atau lebih simpul (vertikal jalur, garis, polyline, atau poligon). Panah dapat dilampirkan ke titik awal atau titik akhir jalur, garis atau polyline. Tag multi-poin dapat menambahkan tag ke semua simpul jalur, garis, polyline atau poligon.

Penanda didefinisikan oleh elemen penanda, dan kemudian mengatur atribut yang relevan (penanda, marker-start, marker-mid, dan marker-end) di jalur, garis, polyline atau poligon. Lihat contoh:

<svgwidth = "4in" tinggi = "2in"

viewbox = "0040002000" versi = "1.1"

xmlns = "http://www.w3.org/2000/svg">

<defs>

<markerid = "segitiga"

viewbox = "001010" refx = "0" refy = "5"

Markerunits = "Strokewidth"

markerwidth = "4" markerHeight = "3"

Orient = "auto">

</marker>

</efs>

<desc> PlaceArarrowHeadattheendofapath.

</desc>

<Pathd = "M1000750L2000750L25001250"

isi = "tidak ada" stroke = "hitam"-stroke-lebar = "100"

marker-end = "url (#triangle)"/>

</svg>

Mari kita lihat pengetahuan yang relevan tentang penanda secara detail :

1. Penanda adalah elemen kontainer, yang dapat menyimpan elemen grafis, elemen kontainer, animasi, elemen gradien, dll. Dalam urutan apa pun.

2. Elemen Marker dapat membuat jendela baru: Atur nilai viewbox.

3. Atribut penting dari penanda:

Markerunits = Strokewidth | UsersPaceOnuse

Properti ini mendefinisikan sistem koordinat yang digunakan oleh isi dari markerwidth properti, markerheight dan marker. Properti ini memiliki 2 nilai untuk dipilih. Nilai pertama Strokewidth adalah nilai default. Sistem koordinat yang digunakan oleh isi dari markerwidth atribut, markerheight dan marker sama dengan nilai yang ditetapkan oleh lebar stroke dari elemen grafis dari penanda.

Misalnya, dalam contoh di atas, lebar elemen penanda adalah 400 dan tingginya 300. Namun, jangan bingung. Koordinat yang digunakan oleh jalur dalam elemen Mark adalah sistem koordinat pengguna baru yang ditetapkan oleh ViewBox.

Nilai lain dari atribut ini adalah UsersPaceOnuse, yang mewakili konten markerwidth atribut, markerheight dan marker menggunakan sistem koordinat yang mengacu pada elemen grafik dari penanda.

Refx, Refy: Menentukan koordinat posisi dari titik yang dirujuk selaras dengan penanda. Misalnya, dalam contoh di atas, titik yang direferensikan adalah titik akhir, dan harus disejajarkan dengan posisi (0,5) dari penanda. Perhatikan bahwa Refx dan Refy Gunakan sistem koordinat pengguna akhir yang ditransformasikan oleh viewbox.

Markerwidth, MarkerHeight: Lebar dan ketinggian jendela penanda, ini mudah dimengerti.

Berorientasi: Menentukan sudut rotasi penanda. Anda dapat menentukan sudut atau langsung menetapkan otomatis.

Otomatis mewakili arah positif sumbu x dan berputar sesuai dengan aturan berikut :

A. Jika titik di mana penanda berada hanya milik satu jalur, arah depan sumbu X penanda sama dengan jalurnya. Lihat contoh di atas.

B. Jika titik di mana penanda terletak milik dua jalur yang berbeda, arah maju dari sumbu x penanda konsisten dengan garis pemerataan sudut sudut di antara kedua jalur.

4. Atribut penanda elemen grafis

Untuk merujuk pada penanda, atribut yang relevan perlu digunakan, terutama ketiga: Marker-Start (letakkan penanda yang dirujuk ke titik awal), mid-mid (letakkan penanda yang dirujuk ke semua titik kecuali titik awal dan titik akhir), marker-end (letakkan rujukan ke titik akhir). Nilai -nilai dari ketiga atribut ini mungkin tidak ada (menyatakan bahwa penanda tidak dikutip), referensi penanda (mengacu pada penanda tertentu), warisan (tidak perlu dikatakan).

Anda juga dapat melihat penggunaan penanda dari contoh di atas.

Script and Style - Elemen Script dan Elemen Gaya

Faktanya, pada dasarnya semua atribut (untuk semua elemen, bukan hanya teks) dapat dikaitkan dengan elemen dengan CSS, dan semua atribut CSS tersedia dalam gambar SVG. Anda dapat secara langsung menggunakan atribut gaya untuk merancang gaya elemen, atau merujuk pada gaya elemen desain lembar gaya. Stylesheets tidak boleh diuraikan untuk file XML (karena kadang -kadang berisi karakter yang menyebabkan masalah), sehingga mereka perlu ditempatkan di bagian XMLCData. Hal yang sama berlaku untuk skrip, dan mereka perlu ditempatkan di bagian XMLCData. Lihat contoh CSS berikut:

<! [CDATA [

.abbreviation {Text-Decoration: Underline;}

]]>

</tyle>

</efs>

<g>

<textx = "20" y = "50" font-size = "30"> ColorScanBespecified </text>

<textx = "20" y = "100" font-size = "30"> byeir

<tspanfill = "rgb (0,0,255)" class = "singkatan"> b </span> nilai </pext>

<textx = "20" y = "150" font-size = "30"> orbykeywordssuchas </text>

<tspanstyle = "Fill: Lightsteelblue; font-size: 30"> Lightsteelblue </span>,

</text>

</g>

</svg>

Mari kita lihat contoh skrip:

<desc> ScriptingtheOnClickeven </ desc>

<defs>

<! [CDATA [

functionHidereveal (evt) {

variableTarget = evt.target;

varthefill = imageTarget.getAttribute ("iff");

if (theFill == 'white')

ImageTarget.setAttribute ("Fill", "URL (#Notes)");

kalau tidak

ImageTarget.setAttribute ("Fill", "White");

}

]]>

</script>

<polaId = "notes" x = "0" y = "0" width = "50" height = "75"

PatternTransform = "Rotate (15)"

POLTERUnits = "UsersPaceOnSeuse">

<linex1 = "20" y1 = "30" x2 = "20" y2 = "0"

stroke-lebar = "3" stroke = "hitam"/>

<linex1 = "20" y1 = "0" x2 = "30" y2 = "5"

stroke-lebar = "3" stroke = "hitam"/>

</pol>

</efs>

<ellipseOnclick = "hidereveal (evt)" cx = "175" cy = "100" rx = "125" ry = "60"

fill = "url (#notes)" stroke = "hitam" stroke-lebar = "5"/>

</svg>

Pemrosesan Bersyarat - Sakelar Elemen

Atribut pemrosesan bersyarat adalah atribut yang dapat mengontrol apakah elemen tersebut diberikan atau tidak. Pada dasarnya sebagian besar elemen (terutama elemen grafik) dapat menentukan sifat pemrosesan bersyarat. Ada 3 properti pemrosesan bersyarat: fitur yang diperlukan, extensions yang diperlukan dan bahasa sistem. Properti ini adalah seperangkat tes, yang memungkinkan Anda untuk menentukan daftar nilai (dua properti pertama dipisahkan oleh spasi, dan properti bahasa dipisahkan oleh koma), dan nilai defaultnya benar.

Elemen sakelar SVG menyediakan kemampuan untuk merender sesuai dengan kondisi yang ditentukan. Elemen sakelar adalah elemen kontainer yang dapat berisi elemen grafis, elemen penjelas, elemen animasi, A, Luar Negeri, G, Gambar, SVG, Switch, Teks, Penggunaan dan Elemen lainnya. Elemen sakelar akan memeriksa atribut pemrosesan bersyarat dari elemen anak langsung secara berurutan, dan kemudian membuat elemen anak pertama yang memenuhi kondisinya sendiri. Elemen anak lainnya akan diabaikan. Properti ini, seperti properti tampilan, hanya akan mempengaruhi rendering elemen yang menggunakan properti ini secara langsung, dan tidak akan mempengaruhi elemen yang dirujuk (seperti elemen yang dirujuk oleh penggunaan). Sederhananya, ketiga atribut ini akan memengaruhi elemen -elemen seperti A, Altglyph, ForeignObject, TextPath, Tref, Tspan, Animate, AnimateColor, Animatemotion, Animatetransform, Set, dll., Dan tidak akan mempengaruhi elemen seperti DEF, kursor, topeng, clippath, pola (elemen -elemen ini tidak dapat diterapkan, atau rujukan.

Catatan : Nilai atribut tampilan dan visibilitas dari elemen anak tidak mempengaruhi hasil penilaian kondisi elemen sakelar.

Untuk daftar nilai untuk atribut pemrosesan bersyarat, silakan merujuk ke dokumen resmi. Berikut adalah contoh kecil:

<witch>

<RectrequiredFeatures = "http://www.w3.org/tr/svg11/feature#filter"

x = "10" y = "10" lebar = "322" tinggi = "502" opacity = "0.6"

fill = "black" stroke = "none" filter = "url (#gblshadow)"/>

<rectx = "10" y = "10" lebar = "322" tinggi = "502" opacity = "0.6"

isi = "hitam" stroke = "tidak ada"/>

</witch>

Arti dari contoh ini adalah: browser yang digunakan mendukung fitur filter, lalu gambar persegi panjang di atas (dengan atribut filter). Jika fitur filter tidak didukung, gambar persegi panjang di bawah ini.

Faktanya, lebih sering, atribut yang paling umum digunakan adalah bahasa sistem, yang merupakan kemampuan pemrosesan teks multi-bahasa. Misalnya:

<witch>

</witch>

</svg>

Referensi Praktis :

Indeks skrip: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Pusat Pengembangan: https://developer.mozilla.org/en/svg

Referensi Populer: http://www.chinasvg.com/

Dokumen Resmi: http://www.w3.org/tr/svg11/