37: SVG ir „JavaScript“ / DOM įvykiai - CSS-gudrybės

Anonim

Kai naudojate įterptąjį , visi elementai yra DOM, kaip ir „ s“ ir „ s“ bei bet kuris kitas HTML elementas.

Jei turite tokį SVG:

 

ir tu darai:

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

gausite nuorodą į tai .

Negana to, galite pritraukti renginių klausytojų, kurie veikia taip, kaip tikėjotės. Taip pat galite koreguoti atributus ir bet ką kitą, ko tikitės, kad galėsite padaryti naudodami „JavaScript“.

Vis dėlto yra bent viena gotcha, kuri mane gavo. Mes dažnai pridedame renginių klausytojus prie nuorodų, laipsniško tobulinimo stiliaus. Ne trivialioje „JavaScript“ architektūroje greičiausiai tie įvykių klausytojai perduoda įvykį kitoms funkcijoms tvarkančioms funkcijoms. Pasikliauti thisraktiniu žodžiu tokiose situacijose tampa keblu ir dažnai nerekomenduojama. Vietoj to, kadangi turite event, galite naudoti event.target. Vis dėlto tai gali būti taip pat keblu, nes naudojant tiesioginį SVG, taikinys gali būti nuoroda, pats SVG elementas arba bet kuri iš SVG formų.

Sprendimas yra pereiti atgal į DOM į numatomą vietą. Arba pabandykite išvengti situacijos:

svg ( pointer-events: none; )

Ką aš rekomenduočiau, jei neplanuojate naudoti jokio interaktyvumo pačiame SVG.