Read Attributes of SVG-Elements in HTML via JS
I have the following markup (HTML with native 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>
...
A js-method outputs a line and several <use href="infotop"> Elements to #outSvg (to become a graph).
The <use> Elements have onmouseover-Events to show tooltips.
Now, when it comes to retrieving the coordinates in the onmouseover-function of the <use> i run into problems:
I tried the following different approaches to retrieve the values:
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);
producing the following 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
Browsers:FF10, Ch16, O11.61, IE9
Question:
Why is getAttribute() failing in the other browsers? Am I missing something important? Is there a consistent way to retrieve the values crossbrowser? (Besides via a switch between evt.target.x and evt.target.correspondingUseElement.x)
important: vanilla js only, and I know about browserswitches, thats not the point! I'll provide a fiddle if needed, as soon as i find the time. Finally - thank you for reading this!
EDIT: * added the js-errors
EDIT2: ** FF returns another Object than the other browsers
Answer
Well, after reading Erik Dahlströms answer, i noticed that FF behaves wrong. It should return an Element-Instance instead of the Use-Element directly.
I use the following code now:
var el = (evt.target.correspondingUseElement)?evt.target.correspondingUseElement:evt.target;
console.log(el.getAttribute("x"));
This way i can retrieve the Attributes via getAttribute() consistently in all browsers.