Keď použijete vložený riadok , všetky prvky sa nachádzajú v DOM, rovnako ako s a s a akýkoľvek iný prvok HTML.
Ak máte SVG ako:
a ty urob:
var rect = document.getElementById("foo");dostanete na to odkaz .
A nielen to, môžete pripojiť poslucháčov udalostí, ktorí fungujú presne tak, ako by ste čakali. A môžete upraviť atribúty a čokoľvek iné, čo by ste od JavaScriptu očakávali.
Je tu aspoň jeden gotcha, ktorý ma dostal. Často pripájame poslucháčov udalostí k odkazom, štýlu postupného vylepšovania. V netriviálnej architektúre JavaScriptu je pravdepodobné, že títo poslucháči udalostí odovzdajú udalosť ďalším funkciám, ktoré s nimi pracujú. Spoliehať sa na thiskľúčové slovo v týchto situáciách je zložité a často sa neodporúča. Namiesto toho, keďže máte event, môžete použiť event.target. To však môže byť rovnako zložité, pretože s vloženým SVG môže byť cieľom odkaz, samotný prvok SVG alebo akýkoľvek tvar SVG.
Riešením je traverz späť DOM na očakávané miesto. Alebo sa situácii vôbec pokúste vyhnúť:
svg ( pointer-events: none; )Čo by som odporučil, ak neplánujete využívať žiadnu interaktivitu v rámci samotného SVG.