使用CSS进行转换，将svg元素两次转换

Question

我正在dimpleJS SVG中浏览图例。它们都是g元素，内部带有rect和文本。我尝试使用翻译首先将元素束在一起，然后使用第二次翻译将g图例居中。代码是这样的：

    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。