Leggi Attributi di SVG-Elements in HTML tramite JS

Ho il seguente markup (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 metodo js produce una row e diversi <use href="infotop"> Elementi a #outSvg (per diventare un grafico). Gli elementi <use> Elementi hanno onmouseover-Events per visualizzare i tooltips.

Ora, quando si tratta di recuperare le coordinate nella onmouseover-function del <use> i gestire i problemi:

Ho provato i seguenti approcci diversi per recuperare i valori:

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

producendo la seguente output:

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

Browser: FF10, Ch16, O11.61, IE9

Domanda:

Perché getAttribute() non riesce negli altri browser? Mi manca qualcosa di importnte? C'è un modo coerente per recuperare i crossbrowser dei valori? (Inoltre tramite un passaggio tra evt.target.x e evt.target.correspondingUseElement.x )

importnte: solo vanilla js, e so dei browser, non è il punto! Fornire un violino se necessario, non appena trovo il tempo. Infine – grazie per aver letto ciò!

EDIT: * ha aggiunto gli errori js

EDIT2: ** FF restituisce un altro object rispetto agli altri browser

Beh, dopo aver letto risposta di Erik Dahlströms, ho notato che FF si comport sbagliato. Dovrebbe restituire direttamente un Element-Instance invece dell'utilizzo-Element.

Ora uso il seguente codice:

 var el = (evt.target.correspondingUseElement)?evt.target.correspondingUseElement:evt.target; console.log(el.getAttribute("x")); 

In questo modo posso recuperare gli attributi tramite getAttribute() coerentemente in tutti i browser.

puoi provare questo? evt.target.getAttributeNode("x").nodeValue . Ho provato questo in safari, cromo, Firefox funzionava bene.

Per quanto so che Firefox non support SVGElementInstance.

Ecco un paio di test per SVGElementInstance dalla testsuite w3c SVG 1.1 Second Edition per verificare:

  • struct-dom-12-b
  • struct-dom-14-f
  • struct-dom-15-f

Quello che dovreste fare è fornire una soluzione fallback se SVGElementInstance non è presente, che è abbastanza facile da rilevare, ad esempio:

 if (elm.correspondingUseElement) { /* elm is a used instance, not a real element */ } else { /* fallback solution */ } 

Se l'elemento è un SVGElementInstance avrà la properties; correspondingUseElement , altrimenti non lo avrà. Gli elementi normali di svg non hanno questa properties;, solo istanze utilizzate lo avranno.

Hai provato evt.target.getAttributeNS(evt.target.parent.namespaceURI,"x") ?