Get position of SVG element with JavaScript

[ted-tanner]

For my app, I need to be able to get the x1, y1, x2, y2 attributes of a <line>. I know I can set these attributes by doing something like this:

let element = document.getElementById("element");
element.x1 = 200;

but if I do this

let element = document.getElementById("element");
console.log("x1: " + element.x1);

the output is always "x1: 0". element.style.x1 is undefined, so I know that element.x1 must be a defined attribute because it returns 0, not undefined. The element's x1 value should be somewhere between 220 and 250, not 0.

I have also tried

console.log("x1: " + element.getAttribute("x1")); 

but it appears the Fitbit SDK doesn't support getAttribute().

I could use a bounded rectangle (element.getBBox()), but then there is no way to know whether y1 or y2 is the top or whether x1 or x2 is on the right, so I might get my x's and y's mixed up.

How can I get the value of the x1 attribute in my JavaScript code?

[ted-tanner]

Does Fitbit simply not support getting x1, x2, y1, y2? That would be a MAJOR blocker for an app I've spend a long time on.

[saaasaab · Accepted solution]

Calling element.x1 works for me when element.x1 is a number but it returns a 0 if the value is input as a percentage. 

[morningReign]

If you want to know what any object has available, you should try looping through it:

let element = document.getElementById("elem");

for(let test in element){
  try{
    console.log(test + ": " + element[test])
  }catch(e){
    console.log(test)
  }
}

 Also, when you ask a question, more information is generally better. For example, if you are asking about a line element, include the GUI element you are using:

<line id="elem" x1="25%" x2="128" y1="64" y2="128" fill="#ff0000" stroke-width="1"/>

When I loop through this element, I get:

[12:55:33 AM]constructor: function(){/* ecmascript */}
[12:55:33 AM]style: [object Object]
[12:55:33 AM]x1: 0
[12:55:33 AM]y1: 64
[12:55:33 AM]x2: 128
[12:55:33 AM]y2: 128
[12:55:33 AM]getBBox: function(){/* ecmascript */}
[12:55:33 AM]parent: [object Object]
[12:55:33 AM]nextSibling: undefined
[12:55:33 AM]firstChild: undefined
[12:55:33 AM]children: 
[12:55:33 AM]text
[12:55:33 AM]textContent
[12:55:33 AM].innerText is deprecated and has been replaced with .text in Fitbit OS 1.1 BETA3. .innerText may be removed in a future release.
[12:55:33 AM]innerText
[12:55:33 AM]getElementById: function(){/* ecmascript */}
[12:55:33 AM]getElementsByClassName: function(){/* ecmascript */}
[12:55:33 AM]getElementsByTypeName: function(){/* ecmascript */}
[12:55:33 AM]getElementsByTagName: function(){/* ecmascript */}
[12:55:33 AM]sendEvent: function(){/* ecmascript */}
[12:55:33 AM]animate: function(){/* ecmascript */}
[12:55:33 AM]id: elem
[12:55:33 AM]class: 
[12:55:33 AM]type: 
[12:55:33 AM]layer: undefined
[12:55:33 AM]addEventListener: function(){/* ecmascript */}
[12:55:33 AM]removeEventListener: function(){/* ecmascript */}
[12:55:33 AM]dispatchEvent: function(){/* ecmascript */}

So,...

As we see from looping through 'element' there is an x1 element, and it is accessible,

But,...

there are some idiosyncrasies with how one manipulates GUI properties; there are a lot of values one can use for initialization, percentages, offsets and such, but JavaScript only allows the code to set simple numbers, and whatever the initialization, JavaScript returns the number the init value resolved to.

In this example for 'x1', "25%" resolves to 0, while for x2, "128" resolves to 128

Regards,

Reign

[MarioDings]

@ted-tanner Tell me about you use case.

I wonder, if you’ve (always) first set the parameters, then you know them.

I’m curious, how come you don’t know them? I can’t imagine any use case.

[ted-tanner]

I am moving an element across the screen using SVG animate. A user can pause the game or otherwise interact with the object. When it is interacted with, I need to be able to get the position of the object.

I am able to do this with rect.getBBox(), but I don’t know which direction the element is oriented with getBBox