HTML5 SVG 2D PENDAHULUAN 7 - Penggunaan kembali dan referensi elemen SVG

Penulis：Eve Cole Waktu Pembaruan：2025-04-12 02:48:01

Saya telah memperkenalkan banyak elemen grafis sebelumnya. Jika banyak elemen grafik sama, apakah saya perlu mendefinisikan yang baru setiap saat? Bisakah kita berbagi beberapa grafik? Ini adalah fokus dari bagian ini - penggunaan kembali elemen SVG.

Kombinasi -G elemen

Elemen G adalah wadah yang menggabungkan sekelompok elemen grafik terkait menjadi keseluruhan; Dengan cara ini, kita dapat beroperasi secara keseluruhan. Elemen ini biasanya dapat digunakan bersama dengan elemen desc dan judul untuk memberikan informasi struktur dokumen. Dokumen yang terstruktur dengan baik biasanya dapat dibaca dan diterjemahkan dengan baik. Lihat contoh kecil:

<svgxmlns = "http://www.w3.org/2000/svg"

Versi = "1.1" lebar = "5cm" tinggi = "5cm">

<desc> twogroups, masing -masing sooftworectangles </ desc>

</g>

</g>

<!-Showoutline dari Canvasing'rect'element->

<rectx = ". 01cm" y = ". 01cm" width = "4.98cm" tinggi = "4.98cm"

isi = "tidak ada" stroke = "biru" stroke-lebar = ". 02cm"/>

</svg>

Beberapa poin yang perlu diperhatikan :

1.xmlns = http: //www.w3.org/2000/svg menunjukkan bahwa namespace default dari seluruh elemen SVG adalah SVG. Ini dapat dihilangkan ketika tidak ada ambiguitas. Karena dokumen SVG adalah dokumen XML, aturan yang relevan untuk namespace XML berlaku di sini. Misalnya, Anda dapat memberikan namespace yang ditampilkan di SVG, memberikan alias ke namespace, dll.

2.G elemen dapat bersarang.

3. Elemen grafik gabungan sama dengan elemen individu, dan nilai ID dapat diberikan. Dengan cara ini, saat dibutuhkan (seperti animasi dan penggunaan kembali sekelompok elemen), Anda bisa merujuk pada nilai ID ini.

4. Menggabungkan satu set elemen grafis dapat mengatur atribut yang relevan dari set elemen ini (mengisi, stroke, transformasi, dll.), Yang juga merupakan skenario di mana kombinasi digunakan.

Template - Elemen Simbol

Elemen simbol digunakan untuk menentukan templat grafis (templat dapat berisi banyak grafik), yang dapat dipakai oleh elemen penggunaan. Fungsi templat sangat mirip dengan elemen G, keduanya menyediakan satu set objek grafis, tetapi ada beberapa perbedaan. Perbedaan dari elemen G adalah:

1. Elemen simbol itu sendiri tidak akan diterjemahkan, hanya contoh template simbol yang akan diterjemahkan.

2. Elemen simbol dapat memiliki atribut viewbox dan preserveaspectratio, yang memungkinkan simbol untuk skala elemen grafik.

Dari sudut pandang rendering, elemen yang mirip dengan elemen simbol adalah elemen penanda (mendefinisikan panah dan penanda) dan pola (mendefinisikan warna); Elemen -elemen ini tidak akan diterjemahkan secara langsung; Penggunaan mereka pada dasarnya dipakai oleh elemen penggunaan. Justru karena alasan inilah atribut 'tampilan' tidak ada artinya untuk simbol.

Kode yang dimodifikasi berikut menunjukkan bagaimana simbol digunakan:

<svgxmlns = "http://www.w3.org/2000/svg"

xmlns: xlink = "http://www.w3.org/1999/xlink"

Versi = "1.1" lebar = "5cm" tinggi = "5cm">

<desc> twogroups, masing -masing sooftworectangles </ desc>

</symbol>

</g>

<UseXlink: href = "#group1" target = "_ blank" rel = "nofollow">

<!-Showoutline dari Canvasing'rect'element->

<rectx = ". 02cm" y = ". 02cm" width = "4.96cm" tinggi = "4.96cm"

isi = "tidak ada" stroke = "biru" stroke-lebar = ". 02cm"/>

</svg>

Tentukan elemen -DEFS

SVG memungkinkan Anda untuk mendefinisikan satu set objek dan kemudian menggunakannya kembali (perhatikan bahwa itu bukan hanya objek grafik). Contoh yang paling umum adalah mendefinisikan warna gradien dan kemudian menetapkan atribut isi ke objek grafis lainnya. Definisi warna gradien tidak akan diberikan, sehingga objek jenis ini dapat ditempatkan di mana saja. Penggunaan kembali sering ditemukan dalam objek grafis, dan kami tidak ingin render secara langsung saat mendefinisikan, tetapi sebaliknya ingin merender dalam referensi. Ini dapat diimplementasikan menggunakan elemen DEFS.

Secara umum, pendekatan yang disarankan adalah menempatkan objek yang direferensikan ke dalam elemen DEFS bila memungkinkan. Objek -objek ini biasanya: AltglyphDef, Clippath, kursor, filter, penanda, topeng, pola, lineargadient, radialgradient, simbol dan objek grafis. Mendefinisikan objek -objek ini dalam elemen DEFS mudah dipahami, sehingga meningkatkan aksesibilitas.

Faktanya, elemen G, elemen simbol, dan elemen def sebagai objek kontainer semuanya memberikan penggunaan kembali pada berbagai derajat, tetapi karakteristik masing -masing elemen mungkin sedikit berbeda: misalnya, elemen G diberikan secara langsung, simbol dan def tidak akan diberikan secara langsung, simbol berisi atribut viewbox, yang akan membuat jendela baru.

Biasanya, elemen yang ditentukan dalam def ditetapkan atribut ID dan digunakan langsung di mana pun mereka digunakan. Bergantung pada elemen, definisi ini dapat digunakan di tempat yang berbeda, seperti warna progresif berikut sebagai atribut:

<svgwidth = "8cm" tinggi = "3cm"

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

<desc> elemen localureferenceswithinancestor's'defs '. </desc>

<defs>

</lineargradient>

</efs>

<rectx = "1cm" y = "1cm" lebar = "6cm" tinggi = "1cm"

fill = "url (#gradient01)"/>

</svg>

Definisi elemen terkait grafik dapat ditautkan ke dokumen menggunakan elemen penggunaan. Misalnya:

<svgwidth = "10cm" tinggi = "3cm" viewbox = "0010030" versi = "1.1"

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

<desc> exampleuse01-simplecaseof'use'ona'rect '</ desc>

<defs>

</efs>

<rectx = ". 1" y = ". 1" lebar = "99.8" tinggi = "29.8"

isi = "tidak ada" stroke = "biru"-stroke-lebar = ". 2"/>

</svg>

Harap perhatikan penggunaan namespace xlink di sini. Meskipun sebagian besar pemirsa juga akan menampilkan item ini dengan benar tanpa itu, untuk konsistensi, XLink namespace harus didefinisikan pada elemen <svg> </svg>.

Elemen Penggunaan Kutipan

Setiap SVG, simbol, G, elemen grafik tunggal dan elemen penggunaan pada dasarnya dapat direferensikan (misalnya diinisialisasi) sebagai objek template oleh elemen penggunaan. Konten grafis yang dirujuk oleh penggunaan akan diberikan di lokasi yang ditentukan. Berbeda dengan elemen gambar, elemen penggunaan tidak dapat merujuk seluruh dokumen.

Elemen penggunaan juga memiliki atribut x, y, lebar dan tinggi. Atribut ini dapat dihilangkan. Jika tidak dihilangkan, koordinat atau panjang konten grafis yang direferensikan akan dipetakan ke ruang koordinat pengguna saat ini.

Proses aksi elemen penggunaan setara dengan menyalin secara mendalam objek yang direferensikan ke pohon DOM non-publik independen; Node induk dari pohon ini adalah elemen penggunaan. Meskipun ini adalah simpul DOM non-publik, pada dasarnya ini adalah simpul DOM. Oleh karena itu, semua nilai atribut, animasi, acara, dan pengaturan terkait CSS dari objek yang direferensikan akan disalin dan masih akan berfungsi. Selain itu, node -node ini juga akan mewarisi atribut yang relevan dari elemen penggunaan dan leluhur penggunaan (perhatikan bahwa unsur -unsur yang dirujuk adalah salinan yang dalam, dan unsur -unsur yang disalin ini tidak ada hubungannya dengan elemen asli, sehingga atribut dari node nenek moyang yang dirujuk tidak akan diwarisi di sini). Jika node -node ini sendiri memiliki atribut terkait (CSS), mereka juga akan menimpa atribut yang diwariskan, yang konsisten dengan node DOM biasa, jadi berhati -hatilah saat menggunakan visibilitas: disembunyikan untuk menggunakan elemen, dan itu tidak harus berfungsi. Namun, karena node ini non-publik, dalam operasi DOM, Anda hanya dapat melihat elemen penggunaan, sehingga Anda hanya dapat mengoperasikan elemen penggunaan.

Dari perspektif efek visual, elemen penggunaan lebih seperti placeholder, dan efek visual setelah rendering sama dengan langsung dengan objek yang direferensikan:

1. Gunakan elemen mengacu pada elemen simbol

Dalam hal ini, efek visual setara dengan:

(1) Ubah elemen penggunaan ke elemen G;

(2) Pindahkan semua sifat penggunaan kecuali x, y, lebar, tinggi, xlink: href ke elemen G;

(3) Ubah atribut X dan Y penggunaan menjadi translate (x, y), dan tambahkan atribut transformasi terakhir dari elemen G;

(4) Ganti elemen simbol yang direferensikan dengan elemen SVG. Elemen SVG ini akan secara eksplisit menggunakan atribut lebar dan tinggi dari elemen penggunaan (elemen penggunaan tidak memiliki atribut ini, yaitu 100%);

(5) Salin secara mendalam konten grafis dari elemen simbol yang direferensikan ke SVG yang diganti.

2. Elemen Penggunaan mengacu pada elemen SVG

Dalam hal ini, efek visual setara dengan:

(1) Ubah elemen penggunaan ke elemen G;

(2) Pindahkan semua sifat penggunaan kecuali x, y, lebar, tinggi, xlink: href ke elemen G;

(3) Ubah atribut X dan Y penggunaan menjadi translate (x, y), dan tambahkan atribut transformasi terakhir dari elemen G;

(4) Salin elemen SVG yang direferensikan termasuk konten. Elemen SVG ini akan secara eksplisit menggunakan atribut lebar dan tinggi dari elemen penggunaan (elemen penggunaan tidak memiliki atribut ini dan menggunakan nilai asli);

3. Situasi lain

Efek visual dalam kasus ini setara dengan:

(1) Ubah elemen penggunaan ke elemen G;

(2) Pindahkan semua sifat penggunaan kecuali x, y, lebar, tinggi, xlink: href ke elemen G;

(3) Ubah atribut X dan Y penggunaan menjadi translate (x, y), dan tambahkan atribut transformasi terakhir dari elemen G;

(4) Salin elemen yang dirujuk;

Lihat efek visual dari contoh berikut :

<svgwidth = "10cm" tinggi = "3cm" viewbox = "0010030" versi = "1.1"

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

<desc> exampleuse03-'Use'witha'transform'attribute </ desc>

<defs>

</efs>

<rectx = ". 1" y = ". 1" lebar = "99.8" tinggi = "29.8"

isi = "tidak ada" stroke = "biru"-stroke-lebar = ". 2"/>

<UseXlink: href = "#myrect"

Transform = "Translate (20.2.5) Rotate (10)"/>

</svg>

Gambar berikut terlihat sama dengan gambar di atas :

<svgwidth = "10cm" tinggi = "3cm" viewbox = "0010030"

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

<desc> exampleuse03-'Use'witha'transform'attribute </ desc>

<rectx = ". 1" y = ". 1" lebar = "99.8" tinggi = "29.8"

isi = "tidak ada" stroke = "biru"-stroke-lebar = ". 2"/>

</g>

</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/