누적 정보를 잃지 않고 svg 애니메이션을 일시 중단 할 수 있습니까?

Question

제한없이 애니메이션을 중단하고 반복 할 수 있지만 무한한 애니메이션을 다시 시작하면 누적 값이 줄어들어 초기 값에서 시작됩니다.

아마도 예를 들어 설명해야합니다. 이 애니메이션을 가지고 : (id="second"를 말) 같은 객체의 회전에 영향을 미치는 것을 나는이 애니메이션을 중지하면

<animate id="main" 
    attributeName="transform" attributeType="XML" 
    begin="startbox.click" dur="1s" end="endbox.click" 
    from="rotate(0)" to="rotate(360)" 
    additive="sum" 
    accumulate="sum" 
    fill="freeze" 
    repeatCount="indefinite" 
    /> 

을하고 다른 하나를 시작 second 완벽 main 중단 된 지점에서 계속됩니다. 그러나 startbox (또는 다른 모든 이벤트로)을 클릭하여 시작하면 main의 모든 차이를 빼고 시작하기 전에 회전을 재설정합니다.

내가 원하는 것은 적절한 "일시 중지"이며 여기서 애니메이션이 이전에 중단 된 곳으로 계속할 수 있습니다. 물론 고정 된 수의 동일한 애니메이션과 같은 수의 동일한 시작/중지 단추를 추가하여 효과를 에뮬레이션 할 수는 있지만 좋은 해결책은 아닙니다. 특히 일시 중지 횟수가 제한되어 있기 때문에 특히 그렇습니다.

---

전체 예

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg 
    xmlns="http://www.w3.org/2000/svg" version="1.1" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <desc>Click example</desc> 
    <g> 
    <rect id="startbox" 
     x="10" y="10" 
     width="20" height="20" 
     stroke="none" fill="green" 
    /> 
    <rect id="endbox" 
     x="10" y="40" 
     width="20" height="20" 
     stroke="none" fill="red" 
    /> 
    <g transform="translate(200,200)"> 
    <rect 
     x="0" y="0" 
     width="50" height="5" 
     stroke="#10e9f3" fill="#30ffd0" 
    > 
     <animate 
     attributeName="transform" attributeType="XML" 
     begin="startbox.click" dur="1s" end="endbox.click" 
     from="rotate(0)" to="rotate(360)" 
     additive="sum" 
     accumulate="sum" 
     fill="freeze" 
     repeatCount="indefinite" 
     /> 
    </rect> 
    </g> 
    </g> 
</svg> 

Answer 1

그것은이 애니메이션 요소로 변환 애니메이션을 사용할 수 없습니다입니다 (단 오페라에서 작동하는 것 같다), 당신은 animateTransform를 사용해야합니다. http://www.w3.org/TR/SVG/animate.html#AnimationAttributesAndProperties

해당 UA로 움직이는 경우 테스트 케이스를 Opera에보고해야합니다.

<animateTransform 
    attributeName="transform" attributeType="XML" 
    type="rotate" 
    begin="startbox.click" dur="1s" end="endbox.click" 
    from="0" to="360" 
    additive="sum" 
    accumulate="sum" 
    fill="freeze" 
    repeatCount="indefinite" 
    /> 

묻는 질문에, 당신은 pause animations using javascript하지만 SVG 1.1 선언적 내가 아는 한 그것을 할 수는 없습니다.

Answer 2

은 그것은 내가 원래 rect.x``로 테스트 한 SVG

SVGRoot.pauseAnimations();