缩放加载的 SVG 并使用捕捉 svg 放大

Scale loaded SVG and zoom in with snap svg

本文关键字：svg 放大 加载 SVG 缩放      更新时间：2023-09-26

所以基本上我需要做的是使用 SNAP 加载 SVG.svg并添加效果（放大）我知道为了实现这一点，我需要尊重这一点：

  • 加载 SVG 文件
  • Scale de SVG in （0 ？）
  • 附加此 SVG
  • 添加变换效果（具有合适的比例）

问题是我需要以 650 宽度和 280 高度的大小显示它。

我

正在加载的SVG，女巫我将其命名为"地图"，宽度为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 )});
                    });

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

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

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

斯菲德尔

我认为如果你想

对动画进行排序，最优雅的方式是使用promises。为此，您所需要的只是将动画函数包装在Q库或jQuery.Deferred中。这是我在jsFiddle上整理的示例 https://jsfiddle.net/stsvilik/Lnhc77b2/

 function animate(obj, conf, duration, asing) {
     var def = Q.defer();
     obj.animate(conf, dur, easing, function(){
        def.resolve();
     });
     return def.promise;
 }

这似乎工作正常，但就像上面说的，也许他的方法更适合做动画 

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

添加多个矩阵的事实是否是性能杀手？或者这是应该这样做的方式？

相关文章：