Membuat SVG Dinamik dengan JavaScript

Gunakan document.createeelementns () untuk membuat elemen SVG dan tambahkannya ke DOM; 2. Menghidupkannya melalui RequestAnimationFrame dan kaedah lain; 3. Mengikat data ke SVG untuk menjana carta visual; 4. Tambah acara mendengar elemen SVG untuk mencapai interaksi; 5. Dinamakan secara dinamik sifat -sifat elemen SVG yang sedia ada untuk bertindak balas terhadap perubahan data, digabungkan dengan JavaScript untuk mencapai grafik vektor dinamik dan interaktif yang dapat dikawal sepenuhnya. Kuncinya ialah menggunakan ruang nama SVG dengan betul dan merawatnya sebagai nod DOM biasa untuk operasi.

Mewujudkan SVG dinamik dengan JavaScript membuka dunia kemungkinan untuk grafik web interaktif dan responsif. Tidak seperti imej statik, SVGs adalah sebahagian daripada DOM, yang bermaksud anda boleh memanipulasi mereka dalam masa nyata menggunakan bentuk, warna, kedudukan, atau bahkan menghasilkan keseluruhan visual berdasarkan data.

Berikut adalah cara anda boleh membuat dan memanipulasi kandungan SVG secara dinamik:

1. Membuat Elemen SVG dengan JavaScript

Oleh kerana SVG adalah berasaskan XML, anda perlu menggunakan document.createElementNS() dan bukannya createElement() untuk memastikan ruang nama yang betul.

 // Buat elemen SVG
const svg = document.createelementns ("http://www.w3.org/2000/svg", "svg");
svg.setAttribute ("lebar", "200");
svg.setAttribute ("ketinggian", "200");

// Buat bulatan
const circle = document.createElementns ("http://www.w3.org/2000/svg", "Circle");
Circle.SetAttribute ("Cx", "100");
Circle.SetAttribute ("Cy", "100");
Circle.SetAttribute ("R", "50");
Circle.SetAttribute ("mengisi", "biru");

// Masukkan bulatan ke SVG
svg.AppendChild (Circle);

// Tambahkan SVG ke halaman
document.body.appendchild (SVG);

Ini mewujudkan bulatan biru dan menambahkannya ke DOM secara dinamik.

2. Animasi elemen SVG

Anda boleh menghidupkan SVG dengan mengemas kini atribut dari masa ke masa menggunakan setInterval , requestAnimationFrame , atau peralihan CSS.

Contoh: Animasi Lingkaran Berkembang

 biarkan radius = 5;

fungsi growcircle () {
  radius = 1;
  Circle.SetAttribute ("r", radius);

  jika (radius <100) {
    RequestAnimationFrame (growCircle);
  }
}

growCircle ();

Ini dengan lancar meningkatkan jejari bulatan menggunakan requestAnimationFrame untuk animasi cecair.

3. Mengikat data ke SVG (Asas Visualisasi Data)

Anda boleh menggunakan JavaScript untuk mengikat data dan menghasilkan bentuk yang sesuai untuk carta atau graf.

Contoh: carta bar dari array

 const data = [30, 70, 50, 90, 40];
const barwidth = 30;
const bargap = 10;

data.foreach ((nilai, indeks) => {
  const x = indeks * (barwidth bargap) 10;
  const y = 200 - nilai; // Dengan mengandaikan ketinggian SVG adalah 200

  const rect = document.createElementns ("http://www.w3.org/2000/svg", "rect");
  rect.setAttribute ("x", x);
  rect.setAttribute ("y", y);
  rect.setAttribute ("lebar", barwidth);
  rect.setAttribute ("ketinggian", nilai);
  rect.setAttribute ("mengisi", "hijau");

  svg.appendchild (rect);
});

Sekarang anda mempunyai carta bar mudah yang dibina sepenuhnya dengan JavaScript dan SVG.

4. Menjawab interaksi pengguna

Elemen SVG boleh bertindak balas terhadap peristiwa seperti klik, hovers, atau seret.

 Circle.AdDeventListener ("klik", () => {
  const currentColor = Circle.GetAttribute ("Fill");
  Circle.SetAttribute ("Fill", CurrentColor === "Blue"? "Red": "Blue");
});

Circle.AdDeventListener ("Mouseover", () => {
  Circle.SetAttribute ("Opacity", "0.7");
});

Circle.AdDeventListener ("Mouseout", () => {
  Circle.SetAttribute ("Opacity", "1.0");
});

Pendengar acara ini membuat interaktif grafik -klik untuk togol warna, hover untuk menukar ketelusan.

5. Mengemas kini SVG yang ada secara dinamik

Anda boleh mengubah suai SVG sedia ada dengan memilih dan mengubah atribut mereka.

 // Dengan mengandaikan anda mempunyai svg yang ada dengan id = "mysvg"
const existingsvg = document.getElementById ("mysvg");
const ExistingRect = ExistingsVg.QuerySelector ("Rect");

// kemas kini mengenai perubahan data
fungsi updatebar (newHeight) {
  sedia ada.setAttribute ("ketinggian", newHeight);
  sedia ada.setAttribute ("y", 200 - newHeight);
}

Ini berguna dalam papan pemuka atau paparan data langsung.

Petua untuk svg dinamik yang lebih baik

• Gunakan kelas CSS apabila mungkin : bukannya menetapkan gaya melalui setAttribute("fill", "...") , tentukan kelas dan togol mereka dengan element.classList .
• Unsur -unsur kumpulan dengan <g></g> : Gunakan <g></g> tag untuk bentuk kumpulan logik (misalnya, ikon atau siri carta) untuk manipulasi yang lebih mudah.
• Bersihkan pendengar acara : Jika menambahkan/mengeluarkan elemen SVG secara dinamik, ingatlah untuk menghapuskan pendengar acara untuk mengelakkan kebocoran ingatan.
• Pertimbangkan perpustakaan untuk visual kompleks : Untuk kes penggunaan lanjutan (seperti D3.js), perpustakaan dapat memudahkan pengikatan data dan peralihan.

Pada asasnya, menggabungkan SVG dan JavaScript memberi anda kawalan penuh ke atas grafik vektor-menjadikan mereka responsif, animasi, dan didorong data. Kuncinya berfungsi dalam ruang nama SVG dan merawat elemen SVG seperti mana -mana nod DOM yang lain. Sebaik sahaja anda mendapat asas -asas, langit adalah had.

Atas ialah kandungan terperinci Membuat SVG Dinamik dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!