37: SVG i JavaScript / DOM događaji - CSS-trikovi

Anonim

Kada koristite ugrađeni , svi su elementi u DOM-u, baš kao i s i s i bilo koji drugi HTML element.

Ako imate SVG poput:

 

a vi radite:

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

dobit ćete referencu na to .

I ne samo to, možete priključiti slušatelje događaja koji rade baš onako kako biste očekivali. Možete prilagoditi atribute i sve ostalo što biste očekivali da ćete moći raditi s JavaScriptom.

Ipak postoji barem jedna poteškoća koja me uhvatila. Slušatelje događaja često povezujemo s vezama, u progresivnom stilu poboljšanja. U netrivijalnoj JavaScript arhitekturi, vjerojatno oni koji slušaju događaje prosljeđuju događaj drugim funkcijama koje rukuju tom funkcionalnošću. Oslanjanje na thisključnu riječ u tim je situacijama nezgodno i često se ne preporučuje. Umjesto toga, budući da je imate event, možete je koristiti event.target. To može biti podjednako nezgodno, jer s ugrađenim SVG-om cilj može biti veza, sam SVG element ili bilo koji od SVG oblika.

Rješenje je vratiti DOM natrag na očekivano mjesto. Ili pokušajte izbjeći situaciju uopće s:

svg ( pointer-events: none; )

Što bih preporučio ako ne planirate koristiti interaktivnost unutar SVG-a.