Quando si utilizza in linea , tutti gli elementi sono nel DOM, proprio come s e s e qualsiasi altro elemento HTML.
Se hai SVG come:
e tu fai:
var rect = document.getElementById("foo");avrai un riferimento a questo .
E non solo, puoi allegare listener di eventi che funzionano proprio come ti aspetteresti. E puoi regolare gli attributi e qualsiasi altra cosa ti aspetti di poter fare con JavaScript.
C'è almeno un trucco però, che mi ha preso. Spesso colleghiamo ascoltatori di eventi a collegamenti, stile di miglioramento progressivo. In un'architettura JavaScript non banale, è probabile che quei listener di eventi passino l'evento ad altre funzioni che gestiscono la funzionalità. Affidarsi alla thisparola chiave in quelle situazioni diventa complicato e spesso non è consigliato. Invece, dato che hai il event, puoi usare event.target. Questo può essere altrettanto complicato, poiché con SVG in linea l'obiettivo potrebbe essere il collegamento, l'elemento SVG stesso o una qualsiasi delle forme SVG.
La soluzione è risalire il DOM fino a un punto previsto. Oppure cerca di evitare la situazione con:
svg ( pointer-events: none; )Cosa che consiglierei se non prevedi di utilizzare alcuna interattività all'interno degli stessi SVG.