svg의 텍스트 애니메이션 "jumps"

Question

텍스트 애니 메이팅에 문제가 있습니다. 텍스트를 왼쪽에서 오른쪽으로 이동하려고합니다. 텍스트가 중간에 작은 "일시 중지"를 가지게하고 나머지 애니메이션을 다시 계속합니다.

하지만 내 텍스트는 매번 위 또는 아래로 몇 픽셀을 이동 한 다음 다시 정의한 정확한 높이로 이동하는 애니메이션 전후에 "점프"됩니다. text2.animate (3000, '', 3200) .move (1299, 220) - 이것은 단지 예일뿐입니다.

그러나 시작 위치와 끝 위치는 모두 동일한 높이에 있습니다. 그래서 나는 그것이 왜 "뛰어"오는지 이해하지 못합니다. 귀찮아지고 있기 때문에이 문제를 도와 줄 수 있기를 바랍니다. http://jsfiddle.net/HLA3b/

당신이 그것은 단지 시작에와 사파리, 크롬과 파이어 폭스에 점프 jsfiddle에 그것은 새로운 시작 때마다 점프 비록 점프 볼 수 있듯이 :

var draw = SVG('animation').size(1299, 554) 
    var nested = draw.nested() 
    var line = draw.line(0, 260, 1299, 260).stroke({ width: 1 }) 

    var text2 = draw.text("The (jumping) bug") 
    text2.move(0,220) 

    text2.animate(7000, '', 1000).move(650, 220) 
    .after(function moveTextR(){ 
    text2.animate(3000, '', 3200).move(1299, 220).after(function(){ 
     text2.animate(1, '', 2300).move(0, 220).after(function(){ 
      text2.clear() 
      var tspan = text2.plain("something pink in the middle") 
      text2.move(0,220) 
      text2.animate(7000, '', 1000).move(650, 220).after(moveTextR) 
     }) 
    }) 
}) 
text2.font({ 
     family: 'Helvetica' 
    , size:  32 
    , anchor: 'start' 
    , leading: '1.5' 
    , fill: '#000' 
}) 

나는 또한 jsfiddle를했습니다 생기.

도움이 될만한 정보를 얻으려고합니다.

미리 감사드립니다.

Answer 1

svg.js 0.x 버전의 버그로 보입니다. 최신 버전을 사용하도록 jsfiddle를 수정했으며 "점프"는 발생하지 않습니다.

http://jsfiddle.net/HLA3b/2/

인해 JSFiddle 외부 자원 링크에, 나는 (SVG 개체를 찾을 수 없습니다) jQuery를 가진 온로드 기능을 추가했지만, 그 외에도, 코드가 완벽하게 작동합니다. 그것은 내가 CDN에있는 최신 하나 1.0.rc3하지만 생산을위한 현재는 1.0rc6입니다 :

$(function() { 

    var draw = SVG('animation').size(1299, 554) 

(...) 

    var text2 = draw.text('The (jumping) bug'); 
    text2.move(0,220) 

    text2.animate(7000, '', 1000).move(650, 220).after(...) 
}) 

나는 버전을 사용하고 있습니다.