[Kosty@n]

Здравствуйте, уважаемые пользователи форума.

Исходные данные :
есть svg файл, в котором очень много тегов <g> и объектов(line, polyline, circle и т. д. ) в них.
Задача:
При клике по объекту(line, polyline, circle и т. д. ), обвести красной рамкой родительский тэг <g>.

Проблема
Рамке присваиваются координаты, как у тега <g>, но она оказывается смещена вправо пикселей на 50


Вот мой скрипт. Полностью файл SVG есть в архиве в приложении.

document.documentElement.onclick = function(ev) {
    lightGr(ev)
}

/* определяем элемент, с которым было произведено действие 

*/
function targetEv(ev) {
    if (ev.target) {
        var targ = ev.target
    } else if (ev.srcElement) {
        var targ = ev.srcElement
    }
    return targ
}



function lightGr(ev) {
    //определяем элемент, с которым было произвдено действие
    var targ = targetEv(ev)
    //определяем элемент <g>

    if (targ.tagName == 'g') {
        var ourEl = targ
    } else if (targ.parentNode.tagName == 'g') {
        var ourEl = targ.parentNode
    }    
    if (ourEl) {
        newW = ourEl.getBBox().width
        newH = ourEl.getBBox().height
        newTr = ourEl.getAttribute('transform')
        console.log(newW + ' ' + newH)
        var lightR = document.createElementNS("http://www.w3.org/2000/svg", "rect")
        lightR.setAttribute('transform', newTr)
        lightR.setAttribute('width', newW)
        lightR.setAttribute('height', newH)
        lightR.setAttribute('fill', 'none')
        lightR.setAttribute('stroke', 'red')
        lightR.setAttribute('stroke-width', '1px')
        console.log(ourEl)
        console.log(lightR)
        document.documentElement.appendChild(lightR)
    }
    
}

Интересуют любые предложения, предположения, мысли. Возможно данная задача решается через CSS(я смог только добавить параметр opacity к тегу g)?