Question

我在svg动画中使用以下代码，它完全适用于chrome和opera，但它不适用于Mozilla Firefox。

请注意，我的所有浏览器都已更新。

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

请注意，我的所有浏览器都已更新。

Answer 1

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

尝试添加

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

适用于您想要支持的任何其他浏览器。

Svg动画在Firefox中不起作用 - 在chrome，opera中工作

1 个答案: