Kiedy używasz inline , wszystkie elementy znajdują się w DOM, tak jak s i si każdy inny element HTML.
Jeśli masz SVG, takie jak:
a ty robisz:
var rect = document.getElementById("foo");otrzymasz odniesienie do tego .
I nie tylko to, możesz dołączyć detektory zdarzeń, które działają zgodnie z oczekiwaniami. Możesz też dostosować atrybuty i wszystko, czego oczekujesz, że będziesz w stanie zrobić z JavaScript.
Jest jednak przynajmniej jedna „gotcha”, która mnie dopadła. Często słuchacze wydarzeń dołączamy do linków, styl progresywnego ulepszania. W nietrywialnej architekturze JavaScript prawdopodobnie te nasłuchujące zdarzenia przekazują zdarzenie do innych funkcji, które obsługują tę funkcjonalność. Poleganie na thissłowie kluczowym w takich sytuacjach jest trudne i często nie jest zalecane. Zamiast tego, skoro masz event, możesz użyć event.target. Może to być jednak równie trudne, ponieważ w przypadku wbudowanego SVG celem może być łącze, sam element SVG lub w ogóle dowolny z kształtów SVG.
Rozwiązaniem jest przejście kopii zapasowej DOM w oczekiwane miejsce. Lub spróbuj w ogóle uniknąć tej sytuacji dzięki:
svg ( pointer-events: none; )Co poleciłbym, jeśli nie planujesz używać jakiejkolwiek interaktywności w samym SVG.