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 this
kulcsszó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.