Преобразование с помощью CSS перевести элемент SVG G дважды

Question

Я перебираю легенду в dimpleJS SVG. Все они представляют собой элементы с прямоугольником и текстом, вложенными внутрь. Я пытаюсь использовать translate, чтобы сначала объединить элементы, а затем второй перевод для центрирования данной легенды. Код выглядит примерно так:

    function legendX(start, stop)
    {
        var step = stop;
        var space = 0;
        var total = 0;

        while (step > start)
        {
            var el = document.getElementById('dimple-' + (step - 1))
            var rect = el.getBoundingClientRect();

            var el2 = document.getElementById('dimple-' + step)
            var rect2 = el2.getBoundingClientRect();

            // do some adjustment using math to set var total

            el.style.transform = 'translate(' + total + 'px)';

            // adjust step as we've reached the end of the row
        }

        // now center the legends

        CenterLegendX(start, stop);
    }

Теперь легенды были преобразованы, но когда я снова вызываю getBoundingClinetRect, rect.x не изменился. Преобразование не отражено в коде.

Как мне это исправить? Экран выглядит хорошо, я просто не могу получить новый rect.x.