Wenn Sie Inline verwenden , befinden sich alle Elemente im DOM, genau wie s und s und jedes andere HTML-Element.
Wenn Sie SVG haben wie:
und du machst:
var rect = document.getElementById("foo");Sie erhalten einen Hinweis darauf .
Und nicht nur das, Sie können Ereignis-Listener anhängen, die genau so funktionieren, wie Sie es erwarten. Und Sie können Attribute und alles andere anpassen, was Sie von JavaScript erwarten.
Es gibt mindestens einen Gotcha, der mich erwischt hat. Wir hängen häufig Ereignis-Listener an Links und einen progressiven Verbesserungsstil an. In einer nicht trivialen JavaScript-Architektur geben diese Ereignis-Listener das Ereignis wahrscheinlich an andere Funktionen weiter, die die Funktionalität übernehmen. Sich thisin solchen Situationen auf das Schlüsselwort zu verlassen, wird schwierig und oft nicht empfohlen. Stattdessen können Sie, da Sie die haben event, verwenden event.target. Dies kann jedoch genauso schwierig sein, da bei Inline-SVG das Ziel die Verknüpfung, das SVG-Element selbst oder eine der SVG-Formen sein kann.
Die Lösung besteht darin, das DOM an einem erwarteten Ort zu sichern. Oder versuchen Sie, die Situation überhaupt zu vermeiden mit:
svg ( pointer-events: none; )Was ich empfehlen würde, wenn Sie keine Interaktivität innerhalb der SVG selbst verwenden möchten.