37: SVG un JavaScript / DOM notikumi - CSS-triki

Anonim

Kad izmantojat iespiestu tekstu , visi elementi atrodas DOM, tāpat kā s un s un visi citi HTML elementi.

Ja jums ir SVG, piemēram:

 

un jūs darāt:

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

jūs saņemsiet atsauci uz to .

Un ne tikai to, jūs varat piesaistīt notikumu klausītājus, kas darbojas tieši tā, kā jūs gaidījāt. Un jūs varat pielāgot atribūtus un visu citu, ko jūs varētu darīt ar JavaScript.

Tomēr ir vismaz viena gota, kas mani ir ieguvusi. Mēs bieži piesaistām notikumu klausītājus saitēm, pakāpeniskam uzlabošanas stilam. Netriviālā JavaScript arhitektūrā visticamāk šie notikumu klausītāji nodod notikumu citām funkcijām, kas apstrādā šo funkcionalitāti. Paļauties uz thisatslēgvārdu šajās situācijās kļūst sarežģīti un bieži vien nav ieteicams. Tā vietā, tā kā jums ir event, varat izmantot event.target. Tomēr tas var būt tikpat grūts, jo ar iekšējo SVG mērķis varētu būt saite, pats SVG elements vai kāda no SVG formām vispār.

Risinājums ir pāriet DOM augšup uz paredzēto vietu. Vai arī mēģiniet izvairīties no situācijas ar:

svg ( pointer-events: none; )

Ko es iesaku, ja jūs neplānojat izmantot jebkādu interaktivitāti pašos SVG.