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)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Can't read property 'items' of undefined.

johnhult opened this issue · comments

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.

@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.