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 to load an existing SVG。

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

我想知道如何transform所有状态到纸的中心？

Answer 1

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

获取bounding box就可以了，eg.

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 - 如何将各种元素转换到绝对中心？

Snap.svg - How to transform various elements to absolute center?

javascript

svg

raphael