javascript - 缩放加载的 SVG 并使用 snap svg 放大

Question

所以基本上我需要做的是使用 SNAP.svg 加载 SVG 并添加效果(放大)我明白为了实现这一点我需要尊重这一点:

• 加载 SVG 文件
• 在 (0 ?) 范围内缩放 SVG
• 附加此 SVG
• 添加变换效果(具有合适的比例)

问题是我需要以 650 宽和 280 高的尺寸显示它。

我正在加载的 SVG，我将其命名为“ map ”，宽度为 1920，高度为 1080。

到目前为止，这是我的代码:

    <svg id="svg" width="650px" height="280px"></svg>
    <script type="text/javascript">
        var s = Snap("#svg");

        var map = Snap.load("./src/map.svg", function (f) {
                        g = f.select("g");
                        var t = Snap.matrix().scale(0.35);
                        s.append(g);
                        g.group(g.selectAll("path")).transform(t);  
                    });
    </script>

似乎缩放指令正在工作，但不是动画。另外，无论它采用什么比例，我如何才能将这个加载的 SVG 居中？

谢谢!

更新:

我设法添加了一些效果，但我认为我这样做的方式不正确:

            var carte = Snap.load("./src/carte.svg", function (f) {
                        g = f.select("g");
                        //var t = Snap.matrix().scale(0.35);
                        s.append(g);
                        //Set the map in first position
                        var firstScene = new Snap.Matrix();
                        firstScene.translate(300, 160);
                        firstScene.scale(0.05);

                        //Zoom effect
                        var secondScene = new Snap.Matrix();
                            secondScene.scale(2.0);
                            secondScene.translate(-850, -360);

                        //Move the matrix till desired point (not finish)
                        var threeScene = new Snap.Matrix();
                            threeScene.translate(-850, -360);

                        g.animate({ transform: firstScene }, 0, function() {g.animate ({ transform: secondScene}, 1500, mina.linear )});

                    });

似乎不可能添加一个计时器或两个以上的效果？

Answer 1

如果有相当多的顺序动画，我可能会想编写一个函数来处理一系列动画，作为替代方案。它可能看起来像这样......

function nextFrame ( el, frameArray,  whichFrame ) {
    if( whichFrame >= frameArray.length ) { return }
    el.animate( frameArray[ whichFrame ].animation, 
                frameArray[ whichFrame ].dur, 
                frameArray[ whichFrame ].easing, 
                nextFrame.bind( null, el, frameArray, whichFrame + 1 ) );
}

var block = s.rect(100, 100, 100, 100, 20, 20);
             .attr({ fill: "rgb(236, 240, 241)", stroke: "#1f2c39",
                     strokeWidth: 3, transform: 's1' });

var frames = [
    { animation: { transform: 's0.4,0.4,200,200' },         dur: 1000, easing: mina.bounce },
    { animation: { transform: 't-100,-80' },                dur: 1000, easing: mina.bounce },
    { animation: { transform: 's1.2,1.2,300,300t200,-100' },dur: 1000, easing: mina.bounce }
    ];

nextFrame( block, frames, 0 );

jsfiddle