SVG 까다로운 keyTimes 동작

Question

애니메이션 SVG 도넛 형 차트를 만들고 있습니다. 내 최선의 시도는 here입니다. 그러나 이것이 내가 원하는 것만은 아닙니다. 화면에 다른 요소가 나타나기 전에 요소가 나타나기 시작한 다음 다른 모든 요소가 나타나고 사라질 때까지 기다린 다음 첫 번째 요소에서이주기를 다시 시작하기를 원합니다. 보시다시피, 요소가 함께 페이드 인/페이딩되고, 애니메이션 시작 시간 만 다릅니다. another try에 값/keyTimes 속성을 시도했습니다. 그러나 애니메이션은 내가 아는 브라우저에서 작동하지 않습니다. 보시다시피

<animate 
    attributeName="opacity" 
    begin="0ms" 
    keyTimes="0,0.2,1" 
    values="0.7,0,0" 
    dur="15000ms" 
    repeatCount="indefinite"/> 

, 난 애니메이션의 지속 시간을 증가하지만,에서 요소의 페이딩 종료하려고 다른 코드 샘플 여기

<animate 
    attributeName="opacity" 
    begin="0ms" //This is for the first element, for anothers it differs 
    //I wish there is `pause` attribute, to pause animation repiting... 
    dur="3000ms" 
    from="0.7" 
    to="0" 
    repeatCount="indefinite"/> 

됩니다 : 여기

먼저 SVG에서 문제 코드 이번에는 20 % (나는 5 가지 요소가 없어짐). 그러나 그것은 효과가 없습니다.

from 및 to을 사용하여 두 개의 값이 keyTimes이고 길이가 dur 인 리터럴 정렬 속성이 적용되지 않았습니다. 여기에 교활한 트릭이 있어야합니다 ...

P.S. This 거의 내가 원하는,하지만 반복 애니메이션이 필요합니다.

Answer 1

문제는 쉼표로 keyTimes 및 value입니다. 세미콜론을 사용하고 문서를 두 번 읽어야합니다.