Javascript SVG路径转换在Firefox中的工作方式不同

我试图通过使用stroke dasharray、stroke dashoffset属性在d3 svg中生成路径转换。我需要的是在特定的时间内慢慢画出路径线。为此，我将stroke dasharray设置为路径的总长度，并在path元素中设置stroke dashoffset属性的动画。我的代码如下所示

var line = d3.svg.line()
          .x(function(d) { return x(d.x); })
          .y(function(d) { return y(d.y); }); 

var path = svg.append("path")//No I18N
            .datum(serData)
            .attr("d", line)
            .attr("class", "line")//No I18N
            .style('stroke', 'blue')
            .style('stroke-width', 2)


            var totalLength = path.node().getTotalLength();

            path
              .style("stroke-dasharray", totalLength + " " + totalLength)
              .style("stroke-dashoffset", totalLength)
              .transition()
              .duration(2000)
              .ease("linear")
              .style("stroke-dashoffset", 0) 

我的预期转换结果的源看起来很像：

面临的问题：上述代码在chrome中正常工作，正如我所预期的。但在firefox中，动画从完整的线路径开始，删除完整的路径并再次绘制。i、 e**动画拍摄两次*e*。如果我将stoke dashoffset的值更改为totalLength/2，它在firefox中工作正常，但在chromehere中工作不正常。转换从路径的中间开始

---

这里有什么问题？有什么帮助吗？

在Firefox中，您需要将路径长度除以笔划宽度：

var offset = (/Firefox/i.test(navigator.userAgent)) ? totalLength / path.node().strokeWidth : totalLength;
path.style("stroke-dashoffset", offset);