Question

我有一个超大的svg文件，我希望能够被拖动/平移，以便用户可以看到整个图像（这是一张地图。）

以下是我必须加载svg文件的内容：

           <div id="stage"> 

           </div>

和js：

$(function(){

$("#stage").load('map_02.svg',function(response){

    $(this).addClass("svgLoaded");

    if(!response){ // Error loading SVG
        $(this).html('Error loading SVG. Be sure you are running from a the http protocol (not locally)');
    }

});

}）;

Answer 1

您可以使用Snap SVG，您的代码将如下所示：

// Tux image is from creative commons, I didn't create it!

var s = Snap("#svgout"); 
var g = s.group();
var tux = Snap.load("Dreaming_tux.svg", function ( loadedFragment ) { 
                        g.append( loadedFragment ); 
                        g.hover( hoverover, hoverout );
                        g.text(300,100, 'hover over me');
                    } );  

var hoverover = function() { g.animate({ transform: 's2r45,150,150' }, 1000, mina.bounce ) };
var hoverout = function() { g.animate({ transform: 's1r0,150,150' }, 1000, mina.bounce ) };

这里有一个有效的例子：http://svg.dabbles.info/snaptut-load-animate.html

该库是Snap SVG，包含大量文档和文档。示例：http://snapsvg.io/

在div中拖动SVG文件

1 个答案: