Question

这个svg动画在chrome中运行良好，但没有safari和firefox。我有这个css：

#one{
fill:#97e8da;
stroke: $green;
}
#two{
fill: #46ceb4;
stroke: $green;
}

#one,#two{
stroke-width: 0;
-webkit-animation:load 3s linear;        
animation:load 3s linear;
}

@-webkit-keyframes load {
0% {
stroke-width: 7pt;
stroke: #46ceb4;
stroke-dashoffset: 1300;
fill-opacity: 0;    
}
20%{
fill-opacity: .3;
stroke-width: 2pt;
stroke: #fff;                   
}

50%{
stroke-width: 1pt;
}

90%{
stroke-width: 0;
stroke-dashoffset: 500;         
}

100%{
stroke-dashoffset:0;
fill-opacity: 1;                    
}
}@keyframes load {
0% {
stroke-width: 7pt;
stroke: #46ceb4;
stroke-dashoffset: 1300;
fill-opacity: 0;    
}
20%{
fill-opacity: .3;
stroke-width: 2pt;
stroke: #fff;                   
}

50%{
stroke-width: 1pt;
}

90%{
stroke-width: 0;
stroke-dashoffset: 500;         
}

100%{
stroke-dashoffset:0;
fill-opacity: 1;                    
}
}

我的内联svg看起来像这样：

<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="130px" height="113px" viewBox="-10.062 -10.34 130 113" enable-background="new -10.062 -10.34 130 113" xml:space="preserve">

                <path id="one" stroke-dasharray="1200 1000" d="M120,81.456L39.094 81.456 50.188 64.799 88.688 64.799 46.472 -10.184 66.943 -10.184 109.18 62.635 z"/>

                <path id="two" stroke-dasharray="1200 1000" d="M0.011,101.998L-10 83.913 44.068 -8.737 84.229 62.414 63.607 62.414 43.62 27.393 z"/>

</svg>

在safari中我可以看到短划线动画发生但路径没有颜色，它只是剪辑形状。在这两种情况下，填充不透明度都可以正常工作

Answer 1

绿色之前$ $做了什么？修复此问题使其成为work in Firefox for me。

#one{
fill:#97e8da;
stroke: green;
}
#two{
fill: #46ceb4;
stroke: green;
}

Answer 2

我不确定你的目标是什么，但我在Firefox，Safari和Chrome上的工作方式相同 http://codepen.io/Bushwazi/pen/jqgaZO

我将stroke-dasharray拉出内联并将其与stroke-dashoffset
我使用AutoPrefixer作为前缀，因为它比我们更聪明。 这可能是你失败的地方，但老实说，我猜。
我记录getTotalLength值以获取要在数组和偏移中使用的实际数字。
动画在笔中循环，但您可以观看它。

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

2 个答案: