SVG element calculated position is wrong when svg is not its viewBox size

I have an svg map displaying countries. I want to create an svg element that gets the same position of the selected country as overlay an element. Thing is that it only gets the accurate position when the size matches with the viewBox size and this even works resizing, but the problem arises when it calculates in smaller screens or when the svg is streched above its viewbox size. Then it’s inaccurate.

Added a pen https://codepen.io/rKaiser/pen/xxoqEMj?editors=1111

// Parent <g>
var parentGroup = document.getElementById('map');
// Country ID
var childGroup = document.getElementById('de');

// Get the bounding box of the child <g>
var bbox = childGroup.getBBox();
console.log('Child BBox:', bbox);

// Get the transformation matrix of the parent <g>
var parentCTM = parentGroup.getCTM();
console.log('Parent CTM:', parentCTM);

// Get the position of the child <g> relative to the parent <g>
var childCTM = childGroup.getCTM();
console.log('Child CTM:', childCTM);

// Calculate the position of the child <g> relative to the parent <g>
var topLeftX = childCTM.e - parentCTM.e;
var topLeftY = childCTM.f - parentCTM.f;
console.log('Top Left X:', topLeftX, 'Top Left Y:', topLeftY);

// Create an SVG red square 
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

rect.setAttribute('x', topLeftX);
rect.setAttribute('y', topLeftY);
rect.setAttribute('width', bbox.width);
rect.setAttribute('height', bbox.height);
rect.setAttribute('fill', 'red');
rect.setAttribute('opacity', '0.35');

// Append the square to the parent <g>
parentGroup.appendChild(rect);

Just to be sure, if there’s a better way to do it, my reasoning wanting to do this is that there will several icons on the map and doing this will make the icons stay on top of the countries and not hidden, when placing the icon in the smaller countries would get the icon partly hidden because of the stacking order and theres no z-index unfortunately.

Thanks!