Leer atributos de SVG-Elements en HTML a través de JS

Question

Feb 14, 2012, 11:59 AM

javascript cross-browser svg no-framework

Leer atributos de SVG-Elements en HTML a través de JS

Tengo el siguiente marcado (HTML con SVG nativo):

<!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>
    ...

Un método js genera una línea y varias<use href="infotop"> Elementos para#outSvg (para convertirse en un gráfico). Los<use> Los elementos tienen onmouseover-Events para mostrar información sobre herramientas.

Ahora, cuando se trata de recuperar las coordenadas en elonmouseover-function del<use> me encuentro con problemas:

Intenté los siguientes enfoques diferentes para recuperar los valores:

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);

produciendo el siguiente resultado:

    //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

Browsers: FF10, Ch16, O11.61, IE9

Pregunta

Por que esgetAttribute() fallando en los otros navegadores? ¿Me estoy perdiendo algo importante? ¿Hay alguna manera consistente de recuperar los valores crossbrowser? (Además a través de un cambio entreevt.target.x yevt.target.correspondingUseElement.x)

importante: solo vanilla js, y sé sobre los interruptores de navegador, ¡ese no es el punto! Proporcionaré un violín si es necesario, tan pronto como encuentre el tiempo. Finalmente, ¡gracias por leer esto!

EDIT: * agregó los js-errors

EDIT2: ** FF devuelve otro objeto que los otros navegadores