37: Dogodki SVG in JavaScript / DOM - CSS-triki

Anonim

Ko uporabljate vrstico , so vsi elementi v DOM-u, tako kot s in s ter kateri koli drugi element HTML.

Če imate SVG, kot je:

 

in ti delaš:

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

dobili boste sklic na to .

In ne samo to, lahko priložite poslušalce dogodkov, ki delujejo tako, kot bi pričakovali. In lahko prilagodite atribute in karkoli drugega, za kar bi pričakovali, da bo zmožen z JavaScriptom.

Obstaja pa vsaj ena težava, ki me ima. Na povezave pogosto pripišemo poslušalce dogodkov, ki postopoma izboljšujejo slog. V netrivialni arhitekturi JavaScript verjetno poslušalci dogodkov posredujejo dogodek drugim funkcijam, ki obvladujejo funkcionalnost. Zanašanje na thisključno besedo je v teh situacijah zapleteno in pogosto odsvetovano. Namesto tega, ker ga imate event, ga lahko uporabite event.target. To pa je lahko prav tako zapleteno, saj je pri vgrajenem SVG cilj lahko povezava, sam element SVG ali katera koli oblika SVG.

Rešitev je vrniti DOM nazaj na pričakovano mesto. Ali pa se situaciji sploh poskusite izogniti z:

svg ( pointer-events: none; )

Kar bi priporočal, če ne nameravate uporabljati interaktivnosti znotraj SVG.