När du använder inline finns alla element i DOM, precis som s och s och alla andra HTML-element.
Om du har SVG som:
och du gör:
var rect = document.getElementById("foo");du får en hänvisning till det .
Och inte bara det, du kan bifoga eventlyssnare som fungerar precis som förväntat. Och du kan justera attribut och allt annat du kan förvänta dig att kunna göra med JavaScript.
Det finns dock åtminstone en gotcha som har fått mig. Vi fäster ofta händelserlyssnare till länkar, progressiv förbättringsstil. I icke-trivial JavaScript-arkitektur är det troligt att dessa händelser lyssnar på händelsen till andra funktioner som hanterar funktionaliteten. Att lita på thisnyckelordet i sådana situationer blir svårt och rekommenderas ofta inte. Istället, eftersom du har event, kan du använda event.target. Detta kan dock vara lika knepigt, eftersom med inbyggd SVG kan målet vara länken, SVG-elementet i sig eller någon av SVG-formerna alls.
Lösningen är att gå igenom DOM till en förväntad plats. Eller försök undvika situationen alls med:
svg ( pointer-events: none; )Vilket jag skulle rekommendera om du inte planerar att använda någon interaktivitet inom SVG själva.