Question

我想在HTML5页面中加载SVG图片，并使它的组件可点击。如果用户将鼠标移到SVG呈现的形状上，则onclick事件应执行某些操作。目的是使用户能够单击SVG图像的一部分或单击该SVG下方的表中提供的数据行。

所有SVG组件都是g元素，它们具有一个text元素，而该元素又具有文本内容，可以用作以后区分各个组件的ID。

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元素添加了一个ID，并且使用简单的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/

有没有办法在SVG图片中的元素上注册onclick事件处理程序？

1 个答案: