Snap.svg 按顺序加载 svg 不可用

Question

我正在尝试让（按顺序加载）示例运行。这是我的代码。我加载 snap.js 然后我的代码在 loadsvg.js 它有我的插件。然后 main.js 用我的代码调用函数。我在控制台中收到一个错误 "base.loadFilesDisplayOrdered is not a function"。所以它找不到任何帮助将不胜感激。谢谢

    Snap.plugin( function( Snap, Element, Paper, global ) {
  function addLoadedFrags( whichSVG, fragList, runWhenFinishedFunc ) { // This is called once all the loaded frags are complete
    for( var count = 0; count < fragList.length; count++ ) {
        myEl = whichSVG.append( fragList[ count ] );
    }
    runWhenFinishedFunc();
  }

  Paper.prototype.loadFilesDisplayOrdered = function( list, afterAllLoadedFunc, onEachElementLoadFunc ) {
     var image, fragLoadedCount = 0, listLength = list.length, fragList = new Array(), whichSVG = this;

      for( var count = 0; count < listLength; count++ ) {
        (function() {
          var whichEl = count,
          fileName = list[ whichEl ],
          image = Snap.load( fileName, function ( loadedFragment ) {
               fragLoadedCount++;
               onEachElementLoadFunc( loadedFragment, fileName );
               fragList[ whichEl ] = loadedFragment;
               if( fragLoadedCount >= listLength ) {
                  addLoadedFrags( whichSVG, fragList, afterAllLoadedFunc );
               }
            } );
        })();
     }
  };

});

然后我在main.js

中调用它

  var base = Snap("#svgout");
  console.log(base);
  var myLoadList = [ "svgs/layer.svg", "svgs/cutout.svg" ];
  var myDisplayList = { "Bird.svg": "zoom", "Dreaming_tux.svg": "fade" };
  base.loadFilesDisplayOrdered( myLoadList, onAllLoaded, onEachLoaded );

Answer 1

问题是，您正在尝试将 Snap 创建到 div 元素中。 Snap 仅适用于 SVG 元素。

改变，

<div id="svgout"></div>

到

<svg id="svgout"></svg>

错误应该会消失。

jsfiddle

Snap.svg 按顺序加载 svg 不可用

Snap.svg Load svg in order not available

javascript

snap.svg