Javascript 缩放加载的SVG并使用快照SVG放大

因此，基本上我需要做的是用SNAP.SVG加载一个SVG并添加一个效果（放大），我知道为了实现这一点，我需要遵守以下几点：

• 加载SVG文件
• 缩放SVG（0？）
• 附加此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>

---

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

这似乎工作得很好，但正如lan上面所说，也许他的方法更适合制作动画

        var carte = Snap.load("./src/carte.svg", function (f) {
                        g = f.select("g");
                        //var t = Snap.matrix().scale(0.35);
                        s.append(g);
                        //Load the map
                        var firstScene = new Snap.Matrix();
                        firstScene.translate(295, 160);
                        firstScene.scale(0.04);

                        //Set scene 1
                        var secondScene = new Snap.Matrix();
                            secondScene.scale(0.4);
                            secondScene.translate(-300, -10);

                        //Set scene 2
                        var threeScene = new Snap.Matrix();
                            //threeScene.scale(0.5);
                            threeScene.translate(-825, -380);

                        //Set scene 3
                        var fourScene = new Snap.Matrix();
                            fourScene.scale(21.0);
                            fourScene.translate(-1164, -526);

                        var anim1 = function() {
                            g.animate({ transform: firstScene}, 0, anim2);
                        }
                        var anim2 = function() {
                            g.animate({ transform: secondScene}, 1500, mina.easing, anim3);
                        }
                        var anim3 = function() {
                            g.animate({ transform: threeScene}, 1000, mina.linear, anim4);

                        }
                        var anim4 = function() {
                            g.animate({ transform: fourScene}, 2000, mina.easing);

                        }

                        anim1();

                    });

---

添加多个矩阵是性能杀手吗？还是应该这样做

这似乎效果不错，但正如lan上面所说的，也许他的方法更适合制作动画

        var carte = Snap.load("./src/carte.svg", function (f) {
                        g = f.select("g");
                        //var t = Snap.matrix().scale(0.35);
                        s.append(g);
                        //Load the map
                        var firstScene = new Snap.Matrix();
                        firstScene.translate(295, 160);
                        firstScene.scale(0.04);

                        //Set scene 1
                        var secondScene = new Snap.Matrix();
                            secondScene.scale(0.4);
                            secondScene.translate(-300, -10);

                        //Set scene 2
                        var threeScene = new Snap.Matrix();
                            //threeScene.scale(0.5);
                            threeScene.translate(-825, -380);

                        //Set scene 3
                        var fourScene = new Snap.Matrix();
                            fourScene.scale(21.0);
                            fourScene.translate(-1164, -526);

                        var anim1 = function() {
                            g.animate({ transform: firstScene}, 0, anim2);
                        }
                        var anim2 = function() {
                            g.animate({ transform: secondScene}, 1500, mina.easing, anim3);
                        }
                        var anim3 = function() {
                            g.animate({ transform: threeScene}, 1000, mina.linear, anim4);

                        }
                        var anim4 = function() {
                            g.animate({ transform: fourScene}, 2000, mina.easing);

                        }

                        anim1();

                    });

---

添加多个矩阵是性能杀手吗？还是应该这样做

另一种选择是，如果有很多序列动画，我可能会尝试编写一个函数来处理一系列动画。它可能看起来像这样

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 );

---

如果有相当多的顺序动画，我可能会尝试编写一个函数来处理一系列动画。它可能看起来像这样

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 );

---

我认为如果你想给动画排序，最优雅的方法就是使用承诺。为此，您只需将animate函数包装到Q库或jQuery.Deferred中。下面是我在JSFIDLE上创建的示例

---

我认为，如果你想对动画进行排序，最优雅的方法就是使用承诺。为此，您只需将animate函数包装到Q库或jQuery.Deferred中。下面是我在JSFIDLE上创建的示例

---

你能把它放在桌子上吗？我可能只会使用快照转换字符串，比如transform（'s0.35'），节省一些代码。代码中没有任何动画？如果您想放大所有内容，也可以通过更改svg（s）元素上的viewBox来放大。我已经在使用transform，它似乎可以工作，但问题是我不想添加动画，我找不到方法您也可以在第二个动画上调用回调来获得第三个，但在这一点上，您可能希望在代码方面做一些稍微不同的事情。这里有一个可能的例子，说明你可以采取的一种方法（如果有用的话，我会把代码作为答案），这似乎是添加动画的正确方法，我终于成功了，你可以把它作为答案发布到JSFIDLE上吗？我可能只会使用快照转换字符串，比如transform（'s0.35'），节省一些代码。代码中没有任何动画？如果您想放大所有内容，也可以通过更改svg（s）元素上的viewBox来放大。我已经在使用transform，它似乎可以工作，但问题是我不想添加动画，我找不到方法您也可以在第二个动画上调用回调来获得第三个，但在这一点上，您可能希望在代码方面做一些稍微不同的事情。这里有一个可能的例子，你可以采取一种方法（如果有用的话，我会把代码作为答案）这似乎是正确的方法，为了添加动画，我终于成功了，你可以发布一个答案，我不认为会有太多的性能问题，只要没有多个转换同时应用。你看起来一个接一个地做这些，我觉得很好。如前所述，您可以完全删除所有矩阵代码，只需使用转换字符串，但这只是个人偏好。是的，我正在一个接一个地进行操作，谢谢您的帮助！我认为只要不同时应用多个转换，就不会有太多的性能问题。你看起来一个接一个地做这些，我觉得很好。如前所述，您可以完全删除所有矩阵代码，只需使用转换字符串，但这只是个人偏好。是的，我正在一个接一个地进行操作，谢谢您的帮助！我发现这是最好（更干净）的方法，再次感谢你！我发现这是最好（更干净）的方法，再次感谢你！