는 자바 스크립트

안녕하세요 내가 만드는거야는 자바 스크립트

을에 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);

길이 변수는 첫째을 console.log에 다시 0으로 제공하지만 나중에 다시 실행하면 다시 정확한 값을 제공하고,에 애니메이션.

마치 선이 움직이기 전에 그려지지 않은 것처럼 보입니다.

출처

2017-03-27 Abarth

당신의 개인적인? – Sirko

이 메서드는 사용자가 선택한 가능성이있는 2.000 개의 다른 선 중 하나를 그립니다. 이 시르코에 대해 어떻게 생각하세요? – 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

답장을 보내 주셔서 감사합니다. 저는 line 요소와 함께 작업 할 수있게되었습니다. 그리고 내가 말하기를 잊어 버린 것은 하나의 화면에만 로컬 항목을 생성한다는 것입니다. – 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

는 자바 스크립트

답변

관련 문제