Quiero que al dar click dentro del cuadrado gris, se dibuje un cuadrado en de 10px x 10px en el lugar que hice click, agrego el elemento dentro del SVG, pero no lo dibuja.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<svg width="1000" height="1000" id="cuadro" class="map-row" style="background-color: rgba(0,0,0,0.5); margin-left:0px;margin-top:0px;" onmousemove="moveMouse(event)" onclick="drawRect(event)">
<rect x="460" y="130" width="10" height="10" fill="#c4ecea" stroke="#3B4152" style="stroke-width: 0.5px" ></rect>
<rect x="460" y="120" width="10" height="10" fill="#c4ecea" stroke="#3B4152" style="stroke-width: 0.5px" ></rect>
<rect x="460" y="110" width="10" height="10" fill="#c4ecea" stroke="#3B4152" style="stroke-width: 0.5px" ></rect>
<rect x="470" y="110" width="10" height="10" fill="#c4ecea" stroke="#3B4152" style="stroke-width: 0.5px" ></rect>
<rect x="470" y="120" width="10" height="10" fill="#c4ecea" stroke="#3B4152" style="stroke-width: 0.5px" ></rect>
</svg>
<script>
function moveMouse(event){
//console.log(event.clientX+"-"+event.clientY);
}
function drawRect(event){
console.log("click");
console.log(event.clientX+"-"+event.clientY);
printRect(event.clientX,event.clientY);
}
function printRect(x,y){
$("#cuadro").append(`<rect x="${x}" y="${y}" width="10" height="10" fill="#c4ecea" stroke="#3B4152" style="stroke-width: 0.5px" ></rect>`);
}
</script>
</body>
</html>