37: SVG und JavaScript/DOM-Ereignisse

Wenn Sie Inline-<svg> verwenden, befinden sich alle Elemente im DOM, genau wie <div>s und <span>s und jedes andere HTML-Element.

Wenn Sie SVG wie

<svg>
  <rect id="foo" x="10" y="10" width="100" height="100" />
</svg>

und Sie tun

var rect = document.getElementById("foo");

erhalten Sie eine Referenz auf dieses <rect>.

Und nicht nur das, Sie können Ereignis-Listener anhängen, die so funktionieren, wie Sie es erwarten würden. Und Sie können Attribute und alles andere ändern, was Sie von JavaScript erwarten würden.

Es gibt jedoch mindestens einen Haken, der mir aufgefallen ist. Wir hängen oft Ereignis-Listener an Links an, im Stil der progressiven Verbesserung. In einer nicht-trivialen JavaScript-Architektur ist es wahrscheinlich, dass diese Ereignis-Listener das Ereignis an andere Funktionen weitergeben, die die Funktionalität verarbeiten. Sich in diesen Situationen auf das this-Schlüsselwort zu verlassen, ist schwierig und wird oft nicht empfohlen. Stattdessen können Sie, da Sie das event haben, event.target verwenden. Das kann jedoch auch schwierig sein, da bei Inline-SVG das Ziel der Link, das SVG-Element selbst oder eine beliebige SVG-Form sein kann.

Die Lösung ist, im DOM zurück zu einer erwarteten Stelle zu traversieren. Oder versuchen Sie, die Situation ganz zu vermeiden mit

svg {
  pointer-events: none;
}

Was ich empfehlen würde, wenn Sie keine Interaktivität innerhalb der SVG selbst planen.