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
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
Share Improve this question edited Feb 15, 2012 at 10:23 Christoph asked Feb 14, 2012 at 10:59 ChristophChristoph 51.2k21 gold badges101 silver badges128 bronze badges 4 |4 Answers
Reset to default 9Well, after reading Erik Dahlström's answer, I noticed that FF behaves incorrectly. 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.
can you try this? evt.target.getAttributeNode("x").nodeValue . I tried this in safari,chrome,Firefox its working fine.
As far as I know Firefox doesn't support SVGElementInstance.
Here are a couple of tests for SVGElementInstance from the w3c SVG 1.1 Second Edition testsuite to verify:
- struct-dom-12-b
- struct-dom-14-f
- struct-dom-15-f
What you should do is to provide a fallback solution if the SVGElementInstance isn't there, which is easy enough to detect, e.g:
if (elm.correspondingUseElement) {
/* elm is a used instance, not a real element */
} else {
/* fallback solution */
}
If the element is an SVGElementInstance it will have the correspondingUseElement property, otherwise it won't have it. Normal svg elements will not have this property, only used instances will have it.
Did you try evt.target.getAttributeNS(evt.target.parent.namespaceURI,"x") ?
target.xortarget.correspondingUseElement.x. Should not be difficult to create a wrapper function for SVG attribute access. – Felix Kling Commented Feb 14, 2012 at 11:06