SVG路径转换在Firefox中有所不同-Java 学习之路

我试图通过使用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)

source for My expected transition result 看起来很相似：http://bl.ocks.org/duopixel/4063326

Problem faced ：上面的代码 works properly in chrome 正如我预期的那样 . 但是在Firefox中，动画从全行路径开始并擦除完整路径并再次绘制它 . 即**采取twic * e *的动画 . 如果我将"stoke-dashoffset"的值更改为（totalLength / 2），它在firefox中正常工作，但不在chrome中（此处转换从路径中间开始）

什么是错的？这有什么帮助？

1 回答

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

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

回复于 2024-05-02T05:46:11+08:00

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

1 回答

相关问题