Når du bruger inline , er alle elementerne i DOM, ligesom s og s og ethvert andet HTML-element.
Hvis du har SVG som:
og du gør:
var rect = document.getElementById("foo");du får en henvisning til det .
Og ikke kun det, du kan vedhæfte lyttere til begivenheder, der fungerer, som du forventer. Og du kan justere attributter og alt andet, du forventer at være i stand til at gøre med JavaScript.
Der er dog mindst en gotcha, der har fået mig. Vi knytter ofte begivenhedslyttere til links, progressiv forbedringsstil. I ikke-triviel JavaScript-arkitektur er det sandsynligt, at disse begivenhedslyttere overfører begivenheden til andre funktioner, der håndterer funktionaliteten. At stole på thisnøgleordet i disse situationer bliver vanskeligt og anbefales ofte ikke. I stedet for, da du har den event, kan du bruge event.target. Dette kan dog være lige så vanskeligt, da med inline SVG kan målet være linket, selve SVG-elementet eller nogen af SVG-figurerne overhovedet.
Løsningen er at krydse DOM tilbage til et forventet sted. Eller prøv overhovedet at undgå situationen med:
svg ( pointer-events: none; )Hvilket jeg vil anbefale, hvis du ikke planlægger at bruge nogen interaktivitet i SVG selv.