SVG 계란 모프 애니메이션

Question

내가 다른 하나에 하나 개의 간단한 SVG 경로 모프 싶습니다. 이 상황이 발생했을 때 제어하려면 JavaScript를 사용하고 싶습니다. 여기

http://jsfiddle.net/brentmitch/RqRjq/이 예에서 사용하는 기본 코드입니다 : 여기

은 내가 할 노력하고있어의 간단한 예로 만든 JSFiddle에 대한 링크의

function makeEgg() { 
    var svgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 
    svgContainer.setAttribute("version", "1.1"); 
    svgContainer.setAttribute("width", "142.308px"); 
    svgContainer.setAttribute("height", "142.308px"); 
    svgContainer.setAttribute("id", "curvecontainer"); 
    svgContainer.setAttribute("x", "0px"); 
    svgContainer.setAttribute("y", "0px"); 
    var eggPath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); 
    eggPath.setAttribute("id", "eggpath"); 
    eggPath.setAttribute("d", "M126.308,83.154c0,39.297-32.718,56.154-55.154,56.154S16,122.451,16,83.154S50,0,71.154,0S126.308,43.856,126.308,83.154z"); 
    eggPath.setAttribute("fill", "GoldenRod"); 
    svgContainer.appendChild(eggPath); 
    document.getElementById('svgcontainer').appendChild(svgContainer); 
} 

function changeToArrow() { 
    var animateEggPath = document.createElementNS('http://www.w3.org/2000/svg', 'animate'); 
    animateEggPath.setAttribute("id", "egganimation"); 
    animateEggPath.setAttribute("xlink:href", "#eggpath"); 
    animateEggPath.setAttribute("attributeType", "XML"); 
    animateEggPath.setAttribute("attributeName", "d"); 
    animateEggPath.setAttribute("from", "M126.308,83.154c0,39.297-32.718,56.154-55.154,56.154S16,122.451,16,83.154S50,0,71.154,0S126.308,43.856,126.308,83.154z"); 
    animateEggPath.setAttribute("to", "M126.308,95.154c0,39.297-17.333-28.667-39.769-28.667S16,134.451,16,95.154S50,12,71.154,12 S126.308,55.856,126.308,95.154z"); 
    animateEggPath.setAttribute("dur", "4s"); 
    animateEggPath.setAttribute("fill", "freeze"); 
} 

function resetToEgg() { 
    var animations = document.getElementById('egganimation'); 
    document.getElementById('eggpath').removeChild(animations); 
} 

SVG를 사용하면, 수 달걀을 화살표로 변형 한 다음 애니메이션 노드를 제거하여 재설정합니다. 내가 가지고있는 문제는 애니메이션이 처음에만 작동한다는 것입니다. 내가 다시 설정하려고하고 다시 실행하면 더 이상 움직이지 않습니다. 그것은 단지 화살표로 즉시 변형됩니다. 애니메이션을 다시 실행하려면 브라우저 창을 새로 고침/새로 고침해야합니다.

가 나는 라파엘 자바 스크립트 라이브러리는 애니메이션의 종류에 대한 굉장 알고 있지만 내가하고 싶은 모든 간단한 모프이다. 내 방문자는 대부분 모바일 장치를 사용하므로이 간단한 애니메이션을 수행하기 위해 라이브러리를로드하지 않는 것이 좋습니다. 나는 각 라인 이상 시간의 전체 많이 지출하지 않았고 내가 중요한 일을 놓친 경우 내가 appologize 그래서 이렇게 먼저 모든 코드의 확인

Answer 1

애니메이션 타임 라인에서 실행되는 모든 기능을 수 있도록 다음으로는 makeEgg();을 추가했습니다. 애니메이션 시간은 기본적으로 0에서 시작하고 애니메이션을 실행하면 4 초로 실행됩니다. 애니메이션을 제거하고 다시 추가하면 타임 라인을 재설정하지 않으므로 애니메이션이 끝 지점 인 4 초에서 실행됩니다. 그래도 setCurrentTime을 호출하면 타임 라인을 다시 시작할 수 있습니다 ...

function resetToEgg() { 
    var animations = document.getElementById('egganimation'); 
    document.getElementById('eggpath').removeChild(animations); 
    curvecontainer.setCurrentTime(0); 
    document.getElementById('arrowbutton').style.display = "inline"; 
    document.getElementById('resetbutton').style.display = "none"; 
} 

Answer 2

은 지저분한입니다.

은 초기 기능은 changeToArrow()-makeEgg() 나는 그 혼자 남아 있기 때문에.

var animations = document.getElementById('egganimation'); 
document.getElementById('eggpath').removeChild(animations); 

var animations = document.getElementById('curvecontainer'); 
document.getElementById('svgcontainer').removeChild(animations); 

으로는 SVG 요소를 제거 그래야 :

나는에서 resetToEgg()에서 처음 두 줄을 수정했습니다. 계란 여기

재설정 http://jsfiddle.net/berodam/hArrb/