Snap.svg Load svg in order not available

Question

I'm trying to get the (load in order) example to work. Here is my code. I load snap.js and then my code in loadsvg.js it has my plugin. Then main.js with my code calling the function. I get a error in console that says "base.loadFilesDisplayOrdered is not a function". So it can't find it any help will be appreciated. Thanks

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

});

Then i call it in 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

The problem is, you are trying to create Snap into a div element. Snap only works on SVG elements.

Change,

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

to

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

And the error should go away.

jsfiddle