[英]Is there a way to register an onclick event handler on elements within an SVG image?
我想在HTML5頁面中加載SVG圖片,並使它的組件可點擊。 如果用戶將鼠標移到SVG呈現的形狀上,則onclick
事件應執行某些操作。 目的是使用戶能夠單擊SVG圖像的一部分或單擊該SVG下方的表中提供的數據行。
所有SVG組件都是具有text
元素的g
元素,而g
元素又具有文本內容,這些文本內容可以用作以后區分各個組件的ID。
SVG示例(僅包含一個g
-component和文本“ 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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.