Question

这个svg动画在chrome中运行良好但在firefox中运行不正常。我的css代码是：

<style type="text/css">
            .st0{stroke-dasharray: 1390 1390;animation: draw 5s linear;-moz-animation: draw 5s linear;-ms-animation: draw 5s linear;}
            .st1{stroke-dasharray: 5250 5250;animation: draws 5s linear;-moz-animation: draws 5s linear;-ms-animation: draws 5s linear;}
            .st5{stroke-width:8;stroke-miterlimit:10;}
@keyframes draw {
    0% {
    stroke-dashoffset: 870;
    stroke:#fff;
    fill:none;
    }
    50% {
    stroke-dashoffset: 0;
    stroke:#fff;
    }
    52% {
        opacity: 0.1;
    }
    70% {
        stroke: none;
    }
    100% {
        stroke:none;
        opacity: 1;
    }
}
@-webkit-keyframes draw {
    0% {
    stroke-dashoffset: 870;
    stroke:#fff;
    fill:none;
    }
    50% {
    stroke-dashoffset: 0;
    stroke:#fff;
    }
    52% {
        opacity: 0.1;
    }
    70% {
        stroke: none;
    }
    100% {
        stroke:none;
        opacity: 1;
    }
}
@-moz-keyframes draw {
    from {
    stroke-dashoffset: 870px;
    stroke:#fff;
    fill:transparent;
    }
    50% {
    stroke-dashoffset: 0px;
    stroke:#fff;
    }
    52% {
        opacity: 0.1;
    }
    70% {
        stroke: none;
    }
    to {
        stroke:none;
        opacity: 1;
    }
}
@-ms-keyframes draw {
    0% {
    stroke-dashoffset: 870;
    stroke:#fff;
    fill:none;
    }
    50% {
    stroke-dashoffset: 0;
    stroke:#fff;
    }
    52% {
        opacity: 0.1;
    }
    70% {
        stroke: none;
    }
    100% {
        stroke:none;
        opacity: 1;
    }
}
@keyframes draws {
    0% {
    stroke-dashoffset: 4500;
    stroke:#fff;
    fill:none;
    }
    50% {
    stroke-dashoffset: 0;
    stroke:#fff;
    fill:none;
    }
    52% {
        fill:#E7E7E7;
        opacity: 0.1;
    }
    70% {
        stroke: none;
    }
    100 {
        stroke:none;
        fill:#E7E7E7;
        opacity: 1;
    }
}
@-webkit-keyframes draws {
    0% {
    stroke-dashoffset: 4500;
    stroke:#fff;
    fill:none;
    }
    50% {
    stroke-dashoffset: 0;
    stroke:#fff;
    fill:none;
    }
    52% {
        fill:#E7E7E7;
        opacity: 0.1;
    }
    70% {
        stroke: none;
    }
    100 {
        stroke:none;
        fill:#E7E7E7;
        opacity: 1;
    }
}
@-moz-keyframes draws {
    0% {
    -moz-stroke-dashoffset: 4500px;
    stroke:#fff;
    fill:transparent;
    }
    50% {
    -moz-stroke-dashoffset: 0px;
    stroke:#fff;
    fill:transparent;
    }
    52% {
        fill:#E7E7E7;
        opacity: 0.1;
    }
    70% {
        stroke: none;
    }
    100 {
        stroke:none;
        fill:#E7E7E7;
        opacity: 1;
    }
}
@-ms-keyframes draws {
    0% {
    stroke-dashoffset: 4500;
    stroke:#fff;
    fill-opacity: 0;
    }
    50% {
    stroke-dashoffset: 0;
    stroke:#fff;
    fill-opacity: 0;
    }
    52% {
        fill:#E7E7E7;
        opacity: 0.1;
    }
    70% {
        stroke: none;
    }
    100 {
        stroke:none;
        fill:#E7E7E7;
        opacity: 1;
    }
}

我的HTML代码是：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"x="0px"y="0px"viewBox="0 0 2000 2000" style="enable-background:new 0 0 2000 2000; width:240px; position: relative;right: 53px;" xml:space="preserve">
<path class="st5 st0" fill="url(#grad3)" d="M604,....."/>
<path class="st5 st0" style="fill:#E7E7E7;" d="M15..."/>
<path class="st5 st1 st2" id="center" style="fill:#E7E7E7; filter:url(#dropshadow)" d="M1057.6,1...."/>

我的代码在chrome中很好，但是firefox：| 怎么了？它是Firefox的bug吗？我该怎么办？在铬我可以看到围绕形状动画的笔画，但在Firefox中没有任何笔画！ https://jsfiddle.net/xsws60y4/

Answer 1

https://jsfiddle.net/19jdbu3f/

我减少了问题，专注于动画笔画，在没有前缀的Firefox上工作

@keyframes draws {
    0% {
        stroke-dashoffset: -6000;
    }

    100 {
        stroke-dashoffset: 0;
    }
}

svg stroke-dashoffset动画在firefox中不起作用

1 个答案: