Als u inline gebruikt , bevinden alle elementen zich in de DOM, net als s en s en elk ander HTML-element.
Als je SVG hebt zoals:
en je doet:
var rect = document.getElementById("foo");u krijgt daar een verwijzing naar .
En dat niet alleen, u kunt luisteraars van evenementen toevoegen die precies werken zoals u zou verwachten. En u kunt attributen aanpassen en al het andere dat u zou verwachten te kunnen doen met JavaScript.
Er is echter tenminste één dingetje, dat heeft mij te pakken. We koppelen vaak luisteraars van evenementen aan links, progressieve verbeteringsstijl. In niet-triviale JavaScript-architectuur geven die gebeurtenislisteners de gebeurtenis waarschijnlijk door aan andere functies die de functionaliteit afhandelen. thisIn die situaties vertrouwen op het zoekwoord wordt lastig en wordt vaak niet aanbevolen. In plaats daarvan kunt u, aangezien u de hebt event, gebruiken event.target. Dit kan echter net zo lastig zijn, omdat met inline SVG het doel de link, het SVG-element zelf of een van de SVG-vormen kan zijn.
De oplossing is om een back-up te maken van de DOM naar een verwachte plaats. Of probeer de situatie helemaal te vermijden met:
svg ( pointer-events: none; )Wat ik zou aanraden als je niet van plan bent om interactiviteit binnen de SVG zelf te gebruiken.