Ler atributos de elementos SVG em HTML via JS

Question

Feb 14, 2012, 11:59 AM

cross-browser svg javascript no-framework

Ler atributos de elementos SVG em HTML via JS

Tenho a seguinte marcação (HTML com 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>
    ...

Um método js gera uma linha e vários<use href="infotop"> Elementos para#outSvg (para se tornar um gráfico). O<use>s elementos têm onmouseover-Events para mostrar dicas de ferramenta

gora, quando se trata de recuperar as coordenadas noonmouseover-function do<use> eu tenho problemas:

Tentei as seguintes abordagens diferentes para recuperar os 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);

produzindo a seguinte saída:

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

Navegadores: FF10, Ch16, O11.61, IE9

Questão

Por que égetAttribute() falhando nos outros navegadores? Estou perdendo algo importante? Existe uma maneira consistente de recuperar os valores crossbrowser? (Além disso, através de uma alternância entreevt.target.x eevt.target.correspondingUseElement.x)

important: vanilla js only, e eu sei sobre os browserswitches, esse não é o ponto! Fornecerei um violino, se necessário, assim que encontrar tempo. Finalmente - obrigado por ler isso!

EDIT: * adicionou os erros-js

EDIT2: ** FF retorna outro Objeto que os outros navegadores