Kun käytät inline-ohjelmaa , kaikki elementit ovat DOM: ssa, aivan kuten s ja s sekä kaikki muut HTML-elementit.
Jos sinulla on SVG, kuten:
ja teet:
var rect = document.getElementById("foo");saat viittauksen siihen .
Eikä vain, voit liittää tapahtumakuuntelijoita, jotka toimivat juuri niin kuin odotit. Ja voit säätää määritteitä ja mitä tahansa muuta, jonka olet todennäköisesti pystyvän tekemään JavaScriptillä.
Siellä on kuitenkin ainakin yksi gotcha, joka on saanut minut. Kiinnitämme tapahtumakuuntelijat usein linkkeihin, progressiiviseen parannustyyliin. Ei-triviaalissa JavaScript-arkkitehtuurissa todennäköisesti tapahtumakuuntelijat välittävät tapahtuman muille toiminnoille, jotka käsittelevät toiminnallisuutta. thisAvainsanaan luottaminen noissa tilanteissa on hankalaa eikä sitä usein suositella. Sen sijaan, koska sinulla on event, voit käyttää event.target. Tämä voi kuitenkin olla yhtä hankalaa, koska sisäisen SVG: n kohdalla kohde voi olla linkki, itse SVG-elementti tai mikä tahansa SVG-muoto.
Ratkaisu on siirtyä takaisin DOM: sta odotettuun paikkaan. Tai yritä välttää tilannetta ollenkaan:
svg ( pointer-events: none; )Tätä suosittelen, jos et aio käyttää mitään vuorovaikutteisuutta SVG: n sisällä.