Når du bruker innebygd , er alle elementene i DOM, akkurat som s og s og ethvert annet HTML-element.
Hvis du har SVG som:
og du gjør:
var rect = document.getElementById("foo");du får en referanse til det .
Og ikke bare det, du kan legge ved hendelseslyttere som fungerer akkurat som du forventer. Og du kan justere attributter og alt annet du forventer å kunne gjøre med JavaScript.
Det er minst en gotcha skjønt, som har fått meg. Vi knytter ofte lyttere til hendelser til lenker, progressiv forbedringsstil. I ikke-triviell JavaScript-arkitektur er det sannsynlig at hendelseslytterne overfører hendelsen til andre funksjoner som håndterer funksjonaliteten. Å stole på thisnøkkelordet i slike situasjoner blir vanskelig og anbefales ofte ikke. I stedet, siden du har event, kan du bruke event.target. Dette kan imidlertid være like vanskelig, siden med innebygd SVG kan målet være lenken, selve SVG-elementet eller noen av SVG-formene i det hele tatt.
Løsningen er å krysse DOM tilbake til et forventet sted. Eller prøv å unngå situasjonen i det hele tatt med:
svg ( pointer-events: none; )Som jeg vil anbefale hvis du ikke har tenkt å bruke interaktivitet i SVG selv.