在JavaScript

我創建一個動畫SVG行，然後動畫使用此代碼，第一個doesen't工作SVG線，可是其餘的呢，我缺少什麼？

var newElement = document.createElementNS('http://www.w3.org/2000/svg','line'); 
      newElement.setAttribute('class','travelPath'); 
      newElement.setAttribute('x1',currentCity.x); 
      newElement.setAttribute('y1',currentCity.y); 
      newElement.setAttribute('x2',nextCity.x+10); 
      newElement.setAttribute('y2',nextCity.y+10); 
      newElement.style.stroke="#3541b1"; 
      $("#theSVG").append(newElement); 

      var length = newElement.getTotalLength(); 

      $(newElement).css({ 
       'stroke-dasharray': length+1, 
       'stroke-dashoffset': length+1 
      }); 

      $(newElement).animate({'stroke-dashoffset': 0}, 3000, mina.bounce);

的長度可變回來爲0的第1的console.log，但是當我在以後的時間再次運行它，它回來與正確的值，並在動畫。

幾乎就好像這條線在它試圖動畫之前一直沒有被繪製出來。

來源

2017-03-27 Abarth

因爲它只是一個簡單的線條，你爲什麼不只是計算的長度你擁有？ – Sirko

那麼，因爲這種方法繪製用戶選擇可能2.000不同的行之一。你怎麼會去這個Sirko？ – Abarth

'length = Math.sqrt（Math.pow（newCity.x + 10 - currentCity.x，2）+ Math.pow（newCity.y + 10 - currentCity.y，2））'。希望我沒有忘記任何括號。 – Sirko

getTotalLength對我對'line'元素的理解支持不好。

您可以將其轉換爲路徑。如...

var newElement = document.createElementNS('http://www.w3.org/2000/svg','path'); 
newElement.setAttribute('class','travelPath'); 
newElement.setAttribute('d', "M50,50L100,100") 
newElement.style.stroke="#3541b1"; 

$("#theSVG").append(newElement); 

var length = newElement.getTotalLength(); 
console.log(length)

jsfiddle

看看是否有幫助的。

來源

2017-03-27 12:47:54 Ian

感謝您的回覆，我將它用於線條元素，而我忘了說的是我只爲一個屏幕創建了一個本地的屏幕。 – Abarth

正如你在歐幾里德平面只是一條直線，你可以只計算直接使用長度：

let length = Math.sqrt( 
       Math.pow(newCity.x + 10 - currentCity.x, 2) + 
       Math.pow(newCity.y + 10 - currentCity.y, 2) 
      );

來源

2017-03-28 16:34:15 Sirko

回答

相關問題