search

alexk111 / SVG-Morpheus

JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design's Delightful Details transitions. (THIS PROJECT IS NOT MAINTAINED ANYMORE)
MIT License
2.7k stars 241 forks source link

Can't read property 'items' of undefined. #12

Closed johnhult closed 8 years ago

johnhult commented 9 years ago

I can't seem to get this to work. What happens is that it defaults to last group in my svg file and on animation end I gets a "can't read property 'items' of undefined". Not sure why it happens but it's line 1419 in the script. Code:

var iconSet = new SVGMorpheus('#icon');
iconSet.to('burger-menu');

and my svg file (tried with the one you have in your project as well)

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g id="back-arrow">
    <path fill="#FFFFFF" d="M30.973,50.5l3.083-3.289L21.723,34.262H50.5v-4.522H21.723L34.057,16.79l-3.083-3.29L13.5,32L30.973,50.5
        L30.973,50.5z"/>
</g>
<g id="burger-menu">
    <path fill="#FFFFFF" d="M0,8.167v9.6h63.999v-9.6H0L0,8.167z M0,36.967h63.999v-9.6H0V36.967L0,36.967z M0,56.166
        h63.999v-9.6H0V56.166L0,56.166z"/>
</g>

and my html 

<object data="../res/icons.svg" type="image/svg+xml" id="icon"></object>

It only ever uses a default animation to set the last group in the svg and after what I assume is 750ms (default animationtime) if says that items is undefined.

alexk111 commented 8 years ago

@johnhult You should embed the svg right into html, instead of calling an external svg via <object>. The <object> is sandboxed and can't be manipulated from scripts on the page.