Есть ли способ зарегистрировать обработчик события onclick для элементов в SVG-изображении?

Question

Я хотел бы загрузить изображение SVG на странице HTML5 и сделать его компоненты кликабельными.Если пользователь наводит указатель мыши на фигуры, представленные SVG, событие onclick должно выполнить какое-то действие.Цель состоит в том, чтобы дать пользователю возможность либо щелкнуть по частям изображения SVG, либо щелкнуть строки данных, представленные в таблице под этим SVG.

Все компоненты SVG являются g элементами, имеющими textэлемент, который, в свою очередь, имеет текстовое содержимое, которое можно использовать в качестве идентификатора для последующего различения отдельных компонентов.

Пример SVG (сокращенно, имея только один g -компонент и текст «abc»):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="232pt" height="260pt" viewBox="0.00 0.00 231.69 260.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <g class="node">
        <ellipse fill="#008000" stroke="#ffffff" cx="61.545" cy="-90" rx="46.2923" ry="18"/>
        <text text-anchor="middle" x="61.545" y="-86.3" font-family="Times,serif" font-size="14.00" fill="#ffffff">abc</text>
    </g>

</svg>

Есть ли способ использовать JQuery (или некоторую другую библиотеку JavaScript или чистый код JavaScript) для регистрации onclick обработчиков событий на этих g элементах?И если да, то как ты можешь это сделать?

Answer 1

Я только что добавил идентификатор к элементу g, и с помощью простого jQuery мне удалось получить событие onClick.

<svg width="232pt" height="260pt" viewBox="0.00 0.00 231.69 260.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <g class="node" id="myId">
        <ellipse fill="#008000" stroke="#ffffff" cx="61.545" cy="-90" rx="46.2923" ry="18"/>
        <text text-anchor="middle" x="61.545" y="-86.3" font-family="Times,serif" font-size="14.00" fill="#ffffff">abc</text>
    </g>
</svg>

$("#myId").on("click", function() { ... });

Вы можете использовать все, что захотите.

JSFiddle: http://jsfiddle.net/oc6zm1by/