Snap.svg-如何将各种元素转换为绝对中心？

Question

下面的头显示了我的粗略动画以及美国的SVG地图。

https://plnkr.co/edit/gXWTk1fGeVUOQJM52OPs?p=preview

<svg id="svg" width="100%" height="100%" viewBox="0 0 959 593"></svg>

JS：

var states = s.selectAll('.state');

states.forEach(function(element) {
    element.click(function(){
        this.attr({
            fill: 'red'
        });

        if (!this.isTransformed) {
            svg.animate({
                transform: 's10'
            });
            this.animate({
            // the transform
            transform: 'R 360 S 3 T0, 0',
         }, 750, mina.easeout);
            this.transform('T0,0');
            this.isTransformed = true;
            activeRegion = this.node.id;

            states.forEach(function(element) {
                if (element.node.id !== activeRegion) {
                    element.addClass('ng-hide');
                }
            });
        } else {
            states.forEach(function(element) {
                element.removeClass('ng-hide');
            });

            this.animate({
            transform: 'R 0 S 1',
            fill: '#E0E0E0'
         }, 750, mina.easeout);
            this.isTransformed = false;
        }
    });

    element.mouseover(function(){
        this.attr({fill: "yellow"});
    });

    element.mouseout(function(){
        this.attr({fill: "#E0E0E0"});
    });
});

该插件使用Snap.svg加载现有的SVG 。

当您单击各个状态时，会出现一个粗糙的动画。 地图外部边缘上的状态不是完全可见。

我想知道如何transform所有状态transform为论文的中心？

Answer 1

获取外部元素的边界框，在示例中，我将所有状态组都放在一个外部组中，并采用了该边界框（如果需要，可以将其附加到添加的组中）。 该元素称为“ #outer”。 您可以尝试获取外部svg的bbox，但是我不确定使用不同浏览器的可靠性如何。

得到它的边界框，例如。

var outerbb = s.select('#outer').getBBox();

然后计算整体元素与单击元素之间的差异。

var bb = this.getBBox();
var diffX = outerbb.cx - bb.cx;
var diffY = outerbb.cy - bb.cy; 

然后，可以将包括差异的转换动画化为转换。

this.animate({
                transform: 'T' + diffX + ',' + diffY + 'S3R360',
             }, 750, mina.easeout);

朋克