script.js

document.onmousemove = function(e){
  var rect = document.getElementById('r');
  rect.setAttribute('x',e.clientX-(rect.getAttribute('width')/2));
  rect.setAttribute('y',e.clientY-(rect.getAttribute('height')/2));
};

document.onclick = function(e){
  var point = document.createElementNS("http://www.w3.org/2000/svg",'rect');
  var rect = document.getElementById('r');

  point.setAttribute('x', e.clientX-50);
  point.setAttribute('y', e.clientY-50);
  point.setAttribute('width', 100);
  point.setAttribute('height', 100);
  document.getElementById('root').appendChild(point);
}

svg-stylesheets.css

svg {
  cursor: none;
}
rect {
  fill:red;
  stroke:black;
  stroke-width:5;
  opacity:0.5
}

test.svg

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="svg-stylesheets.css" ?>
<svg id="root" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="600" xmlns:xlink="http://www.w3.org/1999/xlink">
  <script xlink:href="script.js" />
  
  <rect id="r" x="50" y="20" rx="20" ry="20" width="150" height="150" />
</svg>