37: SVG és JavaScript / DOM események - CSS-trükkök

Anonim

Az inline használatakor az összes elem a DOM-ban található, csakúgy, mint az s és s, valamint bármely más HTML elem.

Ha olyan SVG-vel rendelkezik, mint:

 

és megteszed:

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

kapsz erre utalást .

És nem csak, csatolhatja az eseményhallgatókat, amelyek ugyanúgy működnek, mint amire számított. És beállíthatja az attribútumokat és bármi mást, amire számíthat, hogy képes lesz a JavaScript használatával.

Legalábbis van egy huncut, mégis engem. Az eseményhallgatókat gyakran linkekhez, progresszív fejlesztési stílushoz kötjük. A nem triviális JavaScript architektúrában valószínűleg azok az eseményhallgatók adják át az eseményt a funkciókat kezelő egyéb funkcióknak. A thiskulcsszóra hagyatkozás ezekben a helyzetekben bonyolulttá válik, és gyakran nem ajánlott. Ehelyett, mivel megvan event, használhatja event.target. Ez ugyanolyan trükkös lehet, mivel az inline SVG használatával a cél lehet a link, maga az SVG elem, vagy egyáltalán bármelyik SVG alakzat.

A megoldás az, ha a DOM-on keresztül felfelé haladunk egy várt helyre. Vagy próbálja elkerülni a helyzetet egyáltalán:

svg ( pointer-events: none; )

Amit ajánlanék, ha nem tervez interaktivitást használni az SVG-n belül.