SVG动画在Firefox中不起作用-在Chrome，Opera中工作 [英] Svg animation not working in Firefox - working in chrome, opera

问题描述

我正在将以下代码用于svg动画，它可以完美地在chrome和Opera中运行，但不能在Mozilla Firefox中运行.

I am using the following code for svg animation it is perfectly working in chrome and opera , but its not working in Mozilla Firefox.

请注意，我所有的浏览器均已更新.

Note that all my browsers are updated.

 <defs>
<style type="text/css">

    .st0{fill:#fff;;stroke:#282828;stroke-width:3;stroke-miterlimit:5;transition: .8s;}

    .st0 {
        stroke-dasharray: 2000;
        stroke-dashoffset:0;
        -webkit-animation: dash 4s linear forwards;
        -o-animation: dash 4s linear forwards;
        -moz-animation: dash 4s linear forwards;
        animation: dash 4s linear forwards;
    }

    .st2{fill:#fff;;stroke:#282828;stroke-width:2;stroke-miterlimit:5;transition: .8s;}

    .st2 {
        stroke-dasharray: 2000;
        stroke-dashoffset:0;
        -webkit-animation: dash 4s linear forwards;
        -o-animation: dash 4s linear forwards;
        -moz-animation: dash 4s linear forwards;
        animation: dash 4s linear forwards;
    }

        .st1{fill:#fff;;stroke:#20b21f;stroke-width:3;stroke-miterlimit:5;transition: .8s;}

    .st1 {
        stroke-dasharray: 2000;
        stroke-dashoffset:0;
        -webkit-animation: dash 4s linear forwards;
        -o-animation: dash 4s linear forwards;
        -moz-animation: dash 4s linear forwards;
        animation: dash 4s linear forwards;
    }

    #logo {
    cursor:pointer;
    }

    #logo:hover .st0 {
        fill:#282828;
        stroke: #282828;
        transition: .8s;
        stroke-opacity:0.0;
    }

        #logo:hover .st1 {
        fill:#20b21f;
        stroke: #20b21f;
        transition: .8s;
        stroke-opacity:0.0;
    }

        #logo:hover .st2 {
        fill:#282828;
        stroke: #282828;
        transition: .8s;
        stroke-opacity:0.0;
    }

    #logo.clickit .st0 {
        fill:#282828;
        stroke: #282828;
        stroke-opacity:0.0;
    <!--    fill-opacity:0.0;-->
    }
            #logo.clickit .st1 {
        fill:#20b21f;
        stroke: #20b21f;
        stroke-opacity:0.0;
    <!--    fill-opacity:0.0;-->
    }
        #logo.clickit .st2 {
        fill:#282828;
        stroke: #282828;
        stroke-opacity:0.0;
    <!--    fill-opacity:0.0;-->
    }

    @-webkit-keyframes dash {
        from {
            stroke-dashoffset: 2000;
        }
        to {
            stroke-dashoffset: 0;
        }
    }


</style>

<script type="text/javascript">

    var clicker = document.querySelector('#logo');

clicker.addEventListener('click', function() {

        this.classList.toggle('clickit');

    });

</script>

我正在将以下代码用于svg动画，它可以完美地在chrome和Opera中运行，但不能在Mozilla Firefox中运行.

I am using the following code for svg animation it is perfectly working in chrome and opera , but its not working in Mozilla Firefox.

请注意，我所有的浏览器均已更新.

Note that all my browsers are updated.

推荐答案

您似乎为Webkit定义了@-webkit-keyframes定义，但对于其他任何浏览器都没有定义.

You appear to have a @-webkit-keyframes definition for webkit, but none for any other browsers.

尝试添加

@keyframes dash {
    from {
        stroke-dashoffset: 2000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

为您要支持的任何其他浏览器加上一个.

Plus ones for any other browsers you want to support.

这篇关于SVG动画在Firefox中不起作用-在Chrome，Opera中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！