Append SVG element to an existing SVG element using JS

Question

I am trying to append SVG element circle to an existing SVG element , i want to circle to sit on top of map ie overlay but i am unable to do it properly , i have created JSfiddle for it .Please let me know how to achieve this.

MY code is here

How to append at exact co ordinate i am using below code

document.getElementById('us').appendChild(c1);

Answer 1

You should remove onmouseover attribute from html and bind mouseover event in javascript code, something like this pseudocode:

var item = document.getElementById('id');
item.addEventListener('mouseover', function() {
    var x = getXPosition();
    var y = getYPosition();
    circleElement.setAttribute('cx', x);
    circleElement.setAttribute('cy', y);
}, false);

You should also show/hide element when needed with css classes, inline style or any other method.