How to get the position of an <Circle> element that is inside an SVG via Javascript?

Question

I have an SVG that contains, among other items, an element <circle>. I can manipulate it via Javascript by changing CSS properties such as visibility, but I can’t get his position on the screen.

My idea is that when the mouse passes over certain <div>, another <div> is displayed based on the position of the <circle>.

I tried to use the offsetTop, but it didn’t work.

Answer 1

The Circle position is defined by the attributes cx and cy.

<svg>
    <circle cx="50" cy="50" r="15"></circle>
</svg>

var circulo = document.querySelector('circle');
circulo.addEventListener('mouseover', function() {
    console.log(this.getAttribute('cx'), this.getAttribute('cy'));
});

^{http://jsfiddle.net/6L59khr6/}

This position relates to that of the SVG element.