User makes a click then gets coordinates (x, y). I try to draw the balloon svg in place of click:

The balloon has code:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 88 88" style="enable-background:new 0 0 88 88;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;}
    .st1{fill:#007dbb;}
</style>
<g id="marker2">
    <g>
        <g>
            <path class="st0" d="M74.8,84.5c-20.1,0-39.9,0-59.7,0c0-27.1,0-54.2,0-81.4c19.9,0,39.8,0,59.7,0C74.8,30.2,74.8,57.3,74.8,84.5
                z"/>
        </g>
        <g>
            <g>
                <path class="st1" d="M68,31.3c0,11.2-7.6,20.7-17.8,23.5c-2,0.5-4.9,2.2-6.2,8.3c-1.6-6-4.3-7.8-6.3-8.3
                    C27.5,51.9,20,42.5,20,31.3C20,17.9,30.7,7,44,7C57.3,7,68,17.9,68,31.3z"/>
                <path class="st1" d="M44,67c3.3,0,6,2.7,6,6s-2.7,6-6,6c-3.3,0-6-2.7-6-6S40.7,67,44,67z"/>
            </g>
        </g>
    </g>
</g>
<g id="Layer_1_1_">
</g>
</svg>

It is SVG image.

First how to set width, height for this balloon and how to the point of ballooin in center of click (highlighted by red)?

I tried to set width and height like this:

let group = document.getElementById('marker2');
group.setAttribute("width", '30px');
group.setAttribute("height", '30px');

But it does now work, when I have tried to find a center of circle:

<path class="st1" d="M44,67c3.3,0,6,2.7,6,6s-2.7,6-6,6c-3.3,0-6-2.7-6-6S40.7,67,44,67z"/>

Could you explain me how to place ballooin in the center of click?

My idea is to get rectangle outbox of id="marker2" then find the center:

let rectSmallCircle = getRect('st1');
let box = getRect('marker2');
let height = box.height;
let centerWidth = box.width / 2;

let startPositionX = centerWidth;
let startPositionY = height - rectSmallCircle.height / 2;