Saat Anda menggunakan inline , semua elemen berada di DOM, seperti s dan s dan elemen HTML lainnya.
Jika Anda memiliki SVG seperti:
dan kamu juga:
var rect = document.getElementById("foo");Anda akan mendapatkan referensi untuk itu .
Dan tidak hanya itu, Anda dapat melampirkan event listener yang berfungsi seperti yang Anda harapkan. Dan Anda dapat menyesuaikan atribut dan hal lain yang Anda harapkan dapat dilakukan dengan JavaScript.
Setidaknya ada satu gotcha, yang membuatku. Kami sering melampirkan pendengar acara ke tautan, gaya peningkatan progresif. Dalam arsitektur JavaScript non-trivial, kemungkinan pemroses peristiwa tersebut meneruskan peristiwa tersebut ke fungsi lain yang menangani fungsionalitas tersebut. Mengandalkan thiskata kunci dalam situasi tersebut menjadi rumit dan sering kali tidak disarankan. Sebaliknya, karena Anda memiliki event, Anda dapat menggunakan event.target. Ini bisa sama rumitnya, karena dengan SVG sebaris targetnya bisa berupa tautan, elemen SVG itu sendiri, atau bentuk SVG apa pun.
Solusinya adalah melintasi cadangan DOM ke tempat yang diharapkan. Atau coba dan hindari situasi tersebut sama sekali dengan:
svg ( pointer-events: none; )Yang saya sarankan jika Anda tidak berencana menggunakan interaktivitas apa pun dalam SVG itu sendiri.