Как с помощью JQuery перехватывать клики по элементам SVG файла?

Question

[strelkovandrey]

Добрый день, можно ли перехватывать клики по объектам SVG файла
А именно, на странице отображается SVG файл методом html (или не суть)
Данный файл представляет собой набор всяких разных полигонов, у каждого полигона есть свой ID

Самый простой пример, что нужно сделать, это при клике по любому из элементов алертить его ID
Нашёл статью про это https://blog.mimacom.com/blog/2017/04/27/how-to-cr...
но как я не пробовал по ней всё также сделать, у меня не реагирует svg на клики

Answer 1

[ant2015]

Как и с html кодом: элементам svg присваивать класс или идентификатор. Или по имени тега. Там path, кажется.

Comments

[strelkovandrey]

в этом у меня и беда, сделал ID фигурам SVG и пытаюсь на них повесить click function, но эффекта 0.
даже CSS пытался вешать, то никакого эффекта

[ant2015]

Код бы глянуть. А хоть что-то из скрипта работает? У меня бывало просто забывал проверять document.ready или путь к скрипту неправильный указывал.

[strelkovandrey]

Дело в том, что если я SVG вставлю именно в HTML, т.е. там опишу весь её контент (как здесь jsfiddle.net/TmsrP/1
то всё работает, а если я SVG вставлю из файла

<object type="image/svg+xml" data="image.svg" width="200" height="200" ></object>

то уже не работает

[ant2015]

strelkovandrey, тогда надо по id в jquery получить объект и использовать его свойство contentDocument. И тогда через это свойство обращаться к элементам svg по id или имени тегов.

[ant2015]

strelkovandrey, вот пример
var x = document.getElementById("myframe");
var y = x.contentDocument;
y.body.style.backgroundColor = "red";

Answer 2

[tyzberd]

https://codepen.io/anon/pen/WXYaON?page=1&