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

Question

我正在尝试使用 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) 

来源对于我的预期转换结果看起来很相似：http://bl.ocks.org/duopixel/4063326

面临的问题：如我所料，上述代码在 chrome 中正常工作。但在 Firefox 中，Animation 从完整的行路径开始并擦除完整路径并再次绘制它。即**动画两次*e*。如果我将“stoke-dashoffset”的值更改为 (totalLength/2)，它在 Firefox 中可以正常工作，但在 chrome 中不能正常工作（这里的过渡从路径中间开始）

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

Answer 1

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

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