通过JS读取HTML中的SVG元素属性

Question

我有以下标记(HTML与本机SVG):

<!doctype html>
   <!-- ...    
        html-Elements 
        ... --> 
   <svg version="1.1" ... >
        <defs> <circle id="infop" cx="0" cy="0" r="9" /> </defs>
        <!-- ... 
             svg Elements
             ... --> 
        <svg> <!-- to have separate coordinate-system -->
            <g id="outSvg"></g>
        </svg>
    ...

js方法输出一行和几个<use href="infotop">元素#outSvg(成为图形).该<use>元素具有的onmouseover事件显示工具提示.

现在,当谈到在检索坐标onmouseover-function的<use>我碰到的问题:

我尝试了以下不同的方法来检索值:

function showInfo(evt){

    console.log("target: "+evt.target);
    console.log("AttrNS: "+evt.target.getAttributeNS(null,"x"));
    console.log("Attrib: "+evt.target.getAttribute("x"));
    console.log("basVal: "+evt.target.x.baseVal.value);
    console.log("corrEl: "+evt.target.correspondingUseElement.x.baseVal.value);

产生以下输出:

    //target -> ** [object SVGUseElement] in FF, in all other browsers: [object SVGElementInstance])
    //AttrNS -> Works only in FF
       // * Uncaught TypeError: Object #<SVGElementInstance> has no method 'getAttributeNS'
    //Attrib -> Works only in FF
       // * Uncaught TypeError: Object #<SVGElementInstance> has no method 'getAttribute'
    //basVal -> works only in FF
       // * Uncaught TypeError: Cannot read property 'baseVal' of undefined
    //corrEl -> fails in FF but works in Ch, O and IE

浏览器:FF10,Ch16,O11.61,IE9

题:

为什么getAttribute()在其他浏览器中失败？我错过了重要的事吗？是否有一致的方法来检索值crossbrowser？(除了通过evt.target.x和之间的切换evt.target.correspondingUseElement.x)

重要的是:只有香草js,我知道浏览器开关,这不是重点!一旦找到时间,我会在需要时提供小提琴.最后 - 谢谢你阅读本文!

编辑:*添加了js-errors

EDIT2:**FF返回另一个对象而不是其他浏览器

Answer 1

好吧,在阅读了ErikDahlströms的回答之后,我发现FF表现不对.它应该直接返回Element-Instance而不是Use-Element.

我现在使用以下代码:

var el = (evt.target.correspondingUseElement)?evt.target.correspondingUseElement:evt.target;

console.log(el.getAttribute("x"));

这样我就可以getAttribute()在所有浏览器中一致地检索属性.