SVG动画可以在Chrome浏览器中使用，但不能在Firefox和其他浏览器中使用

Question

好的，所以我有一个基本上是时钟动画的SVG。测试时，它可以在Chrome中按预期工作，但是在Firefox或Safari中尝试时，它会丢失格式。

这是有问题的SVG：

<svg id="svg" width="100%" viewBox="-400 -150 800 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 version="1.1">
    <defs>
        <path id="sec" d="M0,-140A140,140 0 0,1 0,140A140,140 0 0,1 0,-140" stroke-dasharray="880" stroke-dashoffset="-880.1"
         fill="none">
            <animate id="second" attributeName="stroke-dashoffset" dur="1s" repeatCount="60" begin="0s;second.end" additive="sum"
             accumulate="sum" calcMode="spline" values="0;-14.66" keyTimes="0;1" keySplines="0.42 0.0 0.58 1.0" />
        </path>
        <path id="min" d="M0,-130A130,130 0 0,1 0,130A130,130 0 0,1 0,-130" stroke-dasharray="817" stroke-dashoffset="-817.1"
         fill="none">
            <animate id="minute" attributeName="stroke-dashoffset" dur="60s" repeatCount="60" begin="0s;minute.end" additive="sum"
             accumulate="sum" calcMode="spline" values="0;0;-13.613" keyTimes="0;0.9833;1" keySplines="0,0,1,1;0.42 0.0 0.58 1.0" />
        </path>
        <path id="hr" d="M0,-120A120,120 0 0,1 0,120A120,120 0 0,1 0,-120" stroke-dasharray="754" stroke-dashoffset="-754.1"
         fill="none">
            <animate id="hour" attributeName="stroke-dashoffset" dur="3600s" repeatCount="12" begin="0s;hour.end" additive="sum"
             accumulate="sum" calcMode="spline" values="0;0;-62.83" keyTimes="0;0.9997222;1" keySplines="0,0,1,1;0.42 0.0 0.58 1.0" />
        </path>
        <mask id="mask" maskUnits="userSpaceOnUse" x="-150" y="-150" width="300" height="300">
            <g stroke-width="10" stroke-linecap="round" stroke="white">
                <use xlink:href="#sec" x="0" y="0" />
                <use xlink:href="#min" x="0" y="0" />
                <use xlink:href="#hr" x="0" y="0" />
            </g>
        </mask>
    </defs>
    <g stroke-width="7" stroke-linecap="round" mask="url(#mask)">
        <g stroke="hsla(0, 95%, 25%, 1)">
            <use xlink:href="#sec" />
        </g>
        <g stroke="hsla(188, 15%, 35%, 1)">
            <use xlink:href="#min" />
        </g>
        <g stroke="hsla(218, 5%, 15%, 1)">
            <use xlink:href="#hr" />
        </g>
    </g>
</svg>

<script>
    window.onload = function () {
        var now = new Date();
        var h = now.getHours(), m = now.getMinutes(), s = now.getSeconds();
        var curr = h * 60 * 60 + m * 60 + s;
        svg.setCurrentTime(curr);
    };
</script>

秒针从上到下一直移动到下一个位置，而不是从前一个位置进行动画处理。您可以自己测试。这是托管在代码笔上的代码的link。