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

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

1 个答案: