can't get my svg to animate on firefox

Question

ok i'm trying to get an svg to animate with the tag and an external javascript trigger, it's working great on chrome and safari but won't work in firefox and i have some trouble finding out why

so the svg tag is here (the animation is a morphing of the shape and has a lot of stepsvalues in order to achieve the desired effect)

<svg version="1.1" id="shape-morph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 100 40" enable-background="new 0 0 100 40" preserveAspectRatio="none" height="40">
    <path id="shape" fill="#FF5C59" d="M0,0L100,0L100,10,100 10, 0 10,0 10Z">
        <animate id="morph-anim" attributeType="XML" attributeName="d" begin = "indefinite" dur=".4s" keySplines="0 0 1 1" repeatCount="0"
            from="M0,0L100,0L100,10,100 10, 0 10,0 10Z"
            to="M0,0L100,0L100,10,100 10, 0 10,0 10Z"
            values="M0,0L100,0L100,10,C100 10, 0 10,0 10Z;
                    M0,0L100,0L100,10,C98 18, 2 12,0 10Z;
                    M0,0L100,0L100,10,C95 15, 5 15,0 10Z;
                    M0,0L100,0L100,10,C90 20, 10 20,0 10Z;
                    M0,0L100,0L100,10,C80 30, 20 30,0 10Z;
                    M0,0L100,0L100,10,C70 40, 30 40,0 10Z;
                    M0,0L100,0L100,10,C65 45, 35 45,0 10Z;
                    M0,0L100,0L100,10,C60 50, 40 50,0 10Z;
                    M0,0L100,0L100,10,C65 45, 35 45,0 10Z;
                    M0,0L100,0L100,10,C70 40, 30 40,0 10Z;
                    M0,0L100,0L100,10,C80 30, 20 30,0 10Z;
                    M0,0L100,0L100,10,C90 20, 10 20,0 10Z;
                    M0,0L100,0L100,10,C95 15, 5 15,0 10Z;
                    M0,0L100,0L100,10,C98 18, 2 12,0 10Z;
                    M0,0L100,0L100,10,C100 10, 0 10,0 10Z;"
        />
    </path>
</svg>

and the javascript to trigger the animation is as simple as that:

function triggerMenu(){
    document.getElementById("morph-anim").beginElement();
}

$menuBtn.on("click", toggleMenu);

Thank you so much!

Answer 1

The values in the d must be of the same number and form for Firefox.

M0,0L100,0L100,10,100 10, 0 10,0 10Z

is a move and some straight lines

M0,0L100,0L100,10,C80 30, 20 30,0 10Z

for instance is a move, 2 lines and a Bezier curve. Since the other instance doesn't have a Bezier or the same number of lines it won't animate.