Apabila anda menggunakan sebaris , semua elemen berada di DOM, seperti s dan s dan elemen HTML yang lain.
Sekiranya anda mempunyai SVG seperti:
dan anda lakukan:
var rect = document.getElementById("foo");anda akan mendapat rujukan untuk itu .
Dan bukan hanya itu, anda boleh melampirkan pendengar acara yang berfungsi seperti yang anda harapkan. Dan anda boleh menyesuaikan atribut dan apa sahaja yang anda harapkan dapat dilakukan dengan JavaScript.
Sekurang-kurangnya ada satu gotcha, yang membuat saya. Kami sering melampirkan pendengar acara ke pautan, gaya peningkatan progresif. Dalam seni bina JavaScript yang tidak sepele, kemungkinan pendengar acara menyampaikan acara ke fungsi lain yang mengendalikan fungsi tersebut. Mengandalkan thiskata kunci dalam situasi tersebut menjadi sukar dan selalunya tidak digalakkan. Sebaliknya, kerana anda mempunyai event, anda boleh menggunakan event.target. Ini mungkin sama sukarnya, kerana dengan SVG sebaris sasarannya boleh menjadi pautan, elemen SVG itu sendiri, atau bentuk SVG sama sekali.
Penyelesaiannya adalah melintasi DOM ke tempat yang diharapkan. Atau cuba dan hindari keadaan sama sekali dengan:
svg ( pointer-events: none; )Yang saya cadangkan jika anda tidak merancang untuk menggunakan interaktiviti dalam SVG itu sendiri.