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

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

我不确定您的目标是什么，但我在 Firefox、Safari 和 Chrome 上的工作原理相同。
http://codepen.io/Bushwazi/pen/jqgaZO

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

Answer 2

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

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