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中，动画从全行路径开始并擦除完整路径并再次绘制它。即** 动画采取twic * 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);

SVG路径转换在Firefox中有所不同

1 个答案: