Как получить offsetLeft/offsetTop элемента и на странице?

Как в javascript получить offsetLeft/offsetTop элемента <g id="iqaluit"> и <circle id="circle">.
Пробовал так: но выдаёт ошибку TypeError: bar is null

let bar = document.getElementById('iqaluit');
console.log(bar.offsetLeft, bar.offsetTop)
let circle = document.getElementById('circle');
console.log(circle.offsetLeft, circle.offsetTop)

<div class="section-map">
    <canvas class="svgfix__canvas" width="500" height="488"> </canvas>
    <svg id="MAP" data-name="MAP" data-province="MAP" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 1072.93">
        <g id="City_Labels_Canada" data-name="City Labels Canada">
            <g id="iqaluit" data-name="Iqaluit" data-province="nunavut" class="city nohover">
                <circle id="circle" cx="839.32" cy="390.34" r="3.1"></circle>
                <text x="847" y="394" data-name="Iqaluit" class="en de fr es">Iqaluit</text>
            </g>
        </g>
    </svg>
</div>