Bagaimana untuk Mengakses Elemen SVG daripada Fail Dijana Illustrator dengan JavaScript?

Mengakses Elemen SVG dengan JavaScript daripada Fail SVG Dijana Illustrator

Seperti yang dibincangkan, mengakses elemen SVG dengan JavaScript daripada fail SVG yang dibuat dalam Adobe Illustrator memang boleh dilakukan tanpa menggunakan perpustakaan pihak ketiga seperti Raphaël atau jQuery SVG.

Untuk mencapai ini:

1. Muatkan Fail SVG Secara Asynchronous:

Sertakan HTML5 elemen untuk memuatkan fail SVG secara tidak segerak dan mengakses model objek dokumennya (DOM).

<object data="alpha.svg" type="image/svg+xml">

2. Tambah Pendengar Acara Muatkan:

Lampirkan pendengar acara muatkan pada untuk melaksanakan fungsi panggil balik apabila dokumen SVG selesai dimuatkan dan DOMnya tersedia.

<script>
    var a = document.getElementById("alphasvg");
    a.addEventListener("load",function(){
        // code here executes after SVG loads
    }, false);
</script>

3. Dapatkan DOM Dalaman dan Elemen Akses:

Dalam panggilan balik acara muatkan, manipulasi DOM dalaman dokumen SVG dengan mendapatkannya:

var svgDoc = a.contentDocument;

Menggunakan rujukan ini kepada svgDoc, anda boleh mengakses elemen tertentu mengikut ID mereka menggunakan getElementById kaedah:

var delta = svgDoc.getElementById("delta");

4. Tambah Pengendali Acara:

Setelah anda mempunyai akses kepada elemen, anda boleh melampirkan pengendali acara untuk gelagat. Contohnya, untuk menambah pengendali klik pada elemen 'delta':

delta.addEventListener("mousedown",function(){
    alert('hello world!')
}, false);

Penghadan:

Teknik ini tertakluk pada dasar asal yang sama. Oleh itu, fail SVG mesti dihoskan pada domain yang sama dengan fail HTML untuk memastikan akses kepada DOM dalaman.

Atas ialah kandungan terperinci Bagaimana untuk Mengakses Elemen SVG daripada Fail Dijana Illustrator dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!