How do I get the position of a circle element that is inside an SVG via Javascript?

Question

How do I get the position of a circle element that is inside an SVG via Javascript?

Navigation

#1 by (3 votes)

5

I have an SVG which contains, among other things, a <circle> element. I can manipulate it via Javascript, changing CSS properties as visibility , but I can not get its position on the screen.

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

I tried to use offsetTop , but it did not work.

javascript svg

asked by anonymous 12.09.2014 / 20:28

1 answer

Excel How to find the address of the current cell Dynamic menu using AngularJS

score 3 · Accepted Answer

Circle position is defined by the cx and cy attributes.

<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'));
});

link

This position is relative to that of the SVG element.