Když použijete vložené , všechny prvky jsou v DOM, stejně jako s a s a jakýkoli jiný prvek HTML.
Pokud máte SVG jako:
a vy:
var rect = document.getElementById("foo");dostanete na to odkaz .
A nejen to, můžete připojit posluchače událostí, které fungují přesně podle vašich představ. A můžete upravit atributy a cokoli jiného, co byste očekávali od JavaScriptu.
Je tu alespoň jeden gotcha, který mě dostal. Často připojujeme posluchače událostí k odkazům, styl progresivního vylepšení. V netriviální architektuře JavaScriptu je pravděpodobné, že ti posluchači událostí předají událost jiným funkcím, které tuto funkci zpracovávají. Spoléhat se na thisklíčové slovo v těchto situacích je obtížné a často se nedoporučuje. Místo toho, protože máte event, můžete použít event.target. To však může být stejně složité, protože s vloženým SVG by mohl být cílem odkaz, samotný prvek SVG nebo jakýkoli z tvarů SVG vůbec.
Řešením je přejet zpět nahoru DOM na očekávané místo. Nebo se situaci vůbec pokuste vyhnout pomocí:
svg ( pointer-events: none; )Což bych doporučil, pokud nemáte v plánu používat žádnou interaktivitu v samotném SVG.