Когда вы используете inline , все элементы находятся в 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.