Cuando usa en línea , todos los elementos están en el DOM, al igual que sy cualquier otro elemento HTML.
Si tiene SVG como:
y lo hace:
var rect = document.getElementById("foo");obtendrá una referencia a eso .
Y no solo eso, puede adjuntar detectores de eventos que funcionen tal como lo espera. Y puede ajustar los atributos y cualquier otra cosa que espere poder hacer con JavaScript.
Sin embargo, hay al menos una trampa, que me tiene a mí. A menudo adjuntamos oyentes de eventos a enlaces, estilo de mejora progresiva. En la arquitectura JavaScript no trivial, es probable que esos oyentes de eventos pasen el evento a otras funciones que manejan la funcionalidad. Confiar en la thispalabra clave en esas situaciones se vuelve complicado y, a menudo, no se recomienda. En cambio, ya que tiene el event, puede usar event.target. Sin embargo, esto puede ser igual de complicado, ya que con SVG en línea el objetivo podría ser el enlace, el elemento SVG en sí o cualquiera de las formas SVG.
La solución es recorrer el DOM hasta el lugar esperado. O intente evitar la situación con:
svg ( pointer-events: none; )Lo cual recomendaría si no planea usar ninguna interactividad dentro del SVG.