Firefox中的SVG路徑轉換工作方式不同

我試圖通過使用stroke-dasharray，stroke-dashoffset屬性在d3 svg中生成路徑轉換。我的需要是在特定的時間內緩慢地繪製路線。爲此，我將stroke-dasharray設置爲路徑的總長度，併爲path元素中的stroke-dashoffset屬性設置動畫。我對這個代碼將看起來像Firefox中的SVG路徑轉換工作方式不同

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

面臨的問題：上面的代碼工作正常鉻爲我期望。但在Firefox中，動畫從全線路徑開始並擦除完整路徑並再次繪製。即** 動畫採取twic * e *。如果我對「斯托克dashoffset」的值更改爲（totalLength/2），它在Firefox正常工作，但不是在鉻

什麼是錯此處（here過渡從路徑的中間開始）？任何幫助？

來源

2013-12-12 dakshna

在Firefox需要由行程寬度分割路徑的長度：

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

來源

2014-05-30 14:28:06 mrflix

Firefox中的SVG路徑轉換工作方式不同

回答

相關問題