Home/ Questions/Q 7514827
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T00:36:57+00:00

I have the following markup (HTML with native SVG): <!doctype html> <!– … html-Elements

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, 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.

    • 0