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

Question

下面的 plunker 用美国的 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"});
    });
});

这个 plunker 使用 Snap.svg 加载现有的 SVG。

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

我想知道如何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);

plunkr