Animated SVG Button

Button is supposed to animate on mouseover and mouseout, but only works the first time. Subsquent mouseovers work but mouseouts do not. After some research, it turns out to be only Chrome that cannot handle it, because it does not implement the beginElement stuff correctly. In Firefox it works perfectly.

by djwelsh

HTML

<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="60"
height="60">
    <g transform="translate(-0.8,0) scale(0.24)">
        <path transform="translate(0,0)"
        d="M60,220 L190,220 L190,180 L160,160 L60,160 "
        id="el"
        class="mainline">
            <animate attributeName="d" to="M60,220 L190,220 L190,30 L90,30 L60,60 "
            dur="300ms" class="expand" begin="indefinite" repeatCount="1" fill="freeze" />
            <animate attributeName="d" to="M60,220 L190,220 L190,180 L160,160 L60,160 "
            dur="300ms" class="contract" begin="indefinite" repeatCount="1" fill="freeze" />
        </path>
        
        <rect id="overbox" x="0" y="0" width="250" height="250" stroke-opacity="0" fill-opacity="0" />
        
    </g>
</svg>

CSS

.mainline {
    stroke: #ccc;
    stroke-width: 1;
    fill: #ccc;
    fill-opacity: 1;
    stroke-linecap: round;
    stroke-linejoin:round;
}

JavaScript

$('#overbox')
.mouseover(function (event) {
    
    $('.expand').each(function () {
        this.beginElement();
    });
    
})
.mouseout(function (event) {
    
    $('.contract').each(function () {
        this.beginElement();
    });
    
});