动态获取svg元素'id'属性(Google SVG web)

时间:2010-07-02 22:36:59

标签: javascript svg addeventlistener

(使用http://code.google.com/p/svgweb/

window.onsvgload = function() {
  function onEnter(e) {          
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
      targ = targ.parentNode;

    alert(targ.hasAttributeNS(null, 'id')); //displays false
    alert(targ.getAttributeNS(null, 'id')); //displays a blank dialog
    alert(targ.id); //displays a blank dialog
  }

  /* Seldom_Seen is a group element in the SVG - <g id="Seldom_Seen">... */
  document.getElementById('Seldom_Seen').addEventListener("mouseover", onEnter, false); //alert is blank
  document.getElementById('normal_dom_element').addEventListener("mouseover", onEnter, false); //alert displays id as expected
}

事件侦听适用于SVG元素。我似乎无法得到身份证。我可以获得其他对象属性,如x,y值。无论如何要获得目标元素的ID?

2 个答案:

答案 0 :(得分:1)

也许

e.currentTarget

但是使用jQuery,它只是

window.onsvgload = function() {
  $('#Seldom_Seen').mouseover(function(){ onEnter(this); });
  $('#normal_dom_element').mouseover(function(){ onEnter(this); });
}

function onEnter(obj) {
  alert($(obj).attr("id"));
}

答案 1 :(得分:1)

很有可能你得到的目标超出预期。你在'Seldom_Seen'元素中的所有元素都有id吗?您始终可以提醒目标,以查看它是什么类型的元素。

<g>元素上也有一些带有鼠标悬停/鼠标悬停的问题,事件会冒泡,除非你进行一些过滤,否则你可能会得到它们两次。有关可能的解决方法,请参阅slides 17 and 18 here