 <p>Something like this should do it.</p> <pre><code>$("#create").click(function (e) { var svgNS = "http://www.w3.org/2000/svg"; var myCircle = document.createElementNS(svgNS, "circle"); myCircle.setAttributeNS(null, "id", "mycircle"); myCircle.setAttributeNS(null, "fill", 'blue'); myCircle.setAttributeNS(null, "r", '6'); myCircle.setAttributeNS(null, "stroke", "none"); var svg = document.querySelector("svg"); svg.appendChild(myCircle); var pt = svg.createSVGPoint(); pt.x = xpos; pt.y = ypos; var globalPoint = pt.matrixTransform(myCircle.getScreenCTM().inverse()); var globalToLocal = myCircle.getTransformToElement(svg).inverse(); var inObjectSpace = globalPoint.matrixTransform(globalToLocal); myCircle.setAttributeNS(null, "cx", inObjectSpace.x); myCircle.setAttributeNS(null, "cy", inObjectSpace.y); }); </code></pre> <p>This <a href="http://stackoverflow.com/questions/4850821/svg-coordinates-with-transform-matrix/5223921#5223921">question</a> has more details. although its solution is not quite right.</p>