Search code examples
javascriptadobe-edgesnap.svg

Loading Snap.svg JavaScript file into Edge Animate

I have a fully functioning interactive SVG that I have created using Snap.svg (Raphaël's younger brother). It works fine when I test it out by itself, but I have tried loading the external script into an Edge Animate document using yepnope.js, and I am getting error messages:

Uncaught TypeError: Object [object Object] has no method 'ellipse'

Here is the top of my javascript file. I have a feeling it is a scoping issue, but I don't even know where to begin:

var s = new Snap('#Stage_snap'),
    crabBody = s.ellipse(192, 135, 10, 10),
Solution

  • When you create a new Snap like you do, you are just wrapping the dom element with a Snap object. The important part is that if #Stage_snap is html you don't have the svg methods that you would have if the element is svg.

    The solution is easy, change

    <div id="Stage_snap"></div>

    with

    <svg id="Stage_snap"></svg>