SVG 애니메이션이 애니메이션을 다시 실행하지 않습니다.

Question

두 개의 SVG 애니메이션이 경로 요소에 추가되었습니다. 마우스 오버를하고 Anim1 화재가 발생하여 mouseout이 발생하고 Anim2 화재가 발생하고 이것을 반복 할 수 있기를 바랍니다. begin=X.mouseover, begin=X.mouseleave 및 fill="freeze"을 사용하고 있습니다.

처음에는 잘 작동합니다. 그래서 mouseover Anim1 화재, mouseleave Anim2 화재. 그러나 마우스 오버시에만 Anim1이 발생하고 Anim2은 다시 실행되지 않습니다. (또는 적어도 애니메이션을 보지 못했습니다.)

애니메이션은 경로입니다. 속성 d에 애니메이션을 적용하고 있습니까? Chrome과 Opera에서 동일한 결과를 보았습니다.

<path class="js-sector-rollover" id="sector1" x="400" y="431" fill="#7a596a" stroke="#3a596a" d="REMOVED"> 
    <animate id="animOut" attributeName="d" begin="sector1.mouseover" dur="1.2s" 
      from="REMOVED" calcMode="spline" keySplines="0.25 0.1 0.25 1" 
      keyTimes="0;1" fill="freeze" restart="whenNotActive"></animate> 
    <animate id="animIn" attributeName="d" begin="sector1.mouseout" dur="1.2s" 
      from="REMOVED" calcMode="spline" keySplines="0.25 0.1 0.25 1" 
      keyTimes="0;1" fill="freeze" restart="whenNotActive"></animate> 
</path> 

나는 쉽게 읽을 수 있도록 코드 블록에서 실제 경로를 제거했습니다.

나는 또한 beginElement & endElement을 사용해도 동일한 결과를 얻으려고했습니다. 보고에 대한

덕분에 ..

Answer 1

당신은 다른 애니메이션이 시작할 때 반대 애니메이션을 완료 할 end 속성을 사용해야합니다.