SVG Animation Test

Playing with animating the interior pieces of an SVG.

HTML

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="menu" viewBox="0 0 100% 100%" >
        <rect class="t" height="30" width="200" x="50" y="75" fill="#fff"/>
        <rect class="m" height="30" width="200" x="50" y="135" />
        <rect class="b" height="30" width="200" x="50" y="195" />
    </symbol>
</svg>

<div id='svg'>
    <svg class='test_svg'><use xlink:href="#menu"></use></svg>
</div>

CSS

#svg {
    border: 1px solid black;
    height: 300px;
    position: relative;
    width: 300px;
}

#svg svg {
    height: 100%;
    left: 0;
    overflow: visible;
    position: absolute;
    top: 0;
    width: 100%;
}

#menu rect {
    fill: black;
    opacity: 1;
    transform: rotate(0deg) translateX(0px);
    transition: all 0.5s;
}

#menu .t { transform-origin: 150px 90px; }
#svg.open #menu .t { fill: red; transform: translateY(60px) rotate(225deg); }

#svg.open #menu .m { opacity: 0; }

#menu .b { transform-origin: 150px 210px; }
#svg.open #menu .b { fill: red; transform: translateY(-60px) rotate(-225deg); }

JavaScript

$('#svg').on('click', function () {
    $(this).toggleClass('open');
});