Коли ви використовуєте вбудований , усі елементи знаходяться в DOM, як і s та s та будь-який інший елемент HTML.
Якщо у вас SVG, як:
і ви:
var rect = document.getElementById("foo");ви отримаєте посилання на це .
І не тільки це, ви можете підключити прослуховувачі подій, які працюють так, як ви очікували. І ви можете налаштувати атрибути та все інше, що, як ви очікуєте, зможете зробити з JavaScript.
Хоча є принаймні одна проблема, яка мене зрозуміла. Ми часто прикріплюємо слухачів подій до посилань, прогресивний стиль вдосконалення. У нетривіальній архітектурі JavaScript цілком ймовірно, що слухачі подій передають подію іншим функціям, які обробляють цю функцію. Покладатись на thisключове слово в таких ситуаціях стає складно і часто не рекомендується. Натомість, оскільки у вас є event, ви можете використовувати event.target. Однак це може бути настільки ж складно, оскільки при вбудованому SVG ціллю може бути посилання, сам елемент SVG або будь-яка з форм SVG взагалі.
Рішення полягає в тому, щоб повернути назад DOM до очікуваного місця. Або спробуйте уникнути ситуації взагалі за допомогою:
svg ( pointer-events: none; )Що я б порекомендував, якщо ви не плануєте використовувати будь-яку інтерактивність у самій SVG.