我想在 HTML5 页面中加载 SVG 图像并使其组件可点击。如果用户将鼠标移动到 SVG 呈现的形状上,则 onclick
事件应该执行一些操作。目标是使用户能够点击 SVG 图像的部分或点击该 SVG 下方表格中提供的数据行。
所有 SVG 组件都是具有 text
元素的 g
元素,后者又具有文本内容,可用作稍后区分各个组件的 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 代码)在这些 g
元素上注册 onclick
事件处理程序?如果是这样,你该怎么做?
最佳答案
我刚刚向 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/
关于javascript - 有没有办法在 SVG 图像中的元素上注册 onclick 事件处理程序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52590036/