Question

好吧我正试图让svg使用标签和外部javascript触发器进行动画制作，它在chrome和safari上工作得很好，但在firefox中无法工作但我遇到了麻烦找出原因

所以svg标签在这里（动画是形状的变形，有很多步长值，以达到预期的效果）

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

和触发动画的javascript就是这样简单：

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

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

非常感谢你！

Answer 1

d中的值必须与Firefox的数字和格式相同。

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

是一个移动和一些直线

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

例如，

是一个移动，2条线和贝塞尔曲线。由于另一个实例没有贝塞尔曲线或相同数量的线条，因此无法激活。

无法让我的svg在firefox上制作动画

1 个答案: