I have code where I am able to get click events. I'm unable to get double click events on <g> tag though.
<!DOCTYPE html>
<html>
<head>
<style>
body{
background:black;
}
svg{
fill:white;
background:white;
position: absolute;
top:0px;
left:0px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
x=""
i=0;
function clicked(evt){
var append="width* "+(evt.clientX/1188).toFixed(4)+"f , height*"+(evt.clientY/2038).toFixed(4)+"f";
if(i%2===0){
x+="path.quadTo("+append+","
}
else{
x+=append+")\n"
}
i++;
}
function doubleclicked(evt){
alert("doiuble:")
var append="width* "+(evt.clientX/1188).toFixed(4)+"f , height*"+(evt.clientY/2038).toFixed(4)+"f";
x+="path.move("+append+","
}
$(document).ready(function(){
$(document).click(function (ev) {
mouseX = ev.pageX;
mouseY = ev.pageY
console.log(mouseX + ' ' + mouseY);
var color = 'white';
var size = '22px';
$("body").append(
$('<div></div>')
.css('position', 'absolute')
.css('top', mouseY + 'px')
.css('left', mouseX + 'px')
.css('width', size)
.css('height', size)
.css('background-color', color)
);
});
});
</script>
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1198" height="2048">
<g ondblclick="doubleclicked(evt)" onclick="clicked(evt)" >
<path xmlns="http://www.w3.org/2000/svg" fill="currentColor" d="M275 462q140 -29 316 -14q49 4 54 35q0 20 -39 92l-14 24q-14 21 -167 177q-88 89 -104 109q-91 113 -136 307l-8 34v57q0 57 4 82q24 179 153 237q94 47 233 34q141 -15 259 -104q173 -130 270 -371q15 -36 29 -39q13 0 2 47q-82 319 -289 535q-138 138 -292 169 q-192 37 -323 -50q-214 -176 -130 -555q51 -224 197 -429q50 -71 160 -193q58 -64 58 -67q0 -4 -9 -8q-182 -19 -310 29q-20 10 -49 50q-15 21 -21 27q-6 7 -14 4q-13 -10 -5 -33q4 -18 19 -42q75 -123 156 -144z"/>
</g>
</svg>
</div>
</body>
</html>