Анимация SVG: сначала строк, затем заполнение цветом

#css #css3 #svg #анимация

Необходимо добиться следующего эффекта: http://gph.is/2iZZ3Hw -
рисования контуров и затем заполнение цветом.
Для определения общей длины путей может понадобиться JS. 

Ниже код   









Источник : Animate SVG with CSS: first the stroke, then the fill
    

Ответы

Ответ 1






Из примера видно, что нужно анимировать строки трёх объектов логотипа: круга, трапеции
и треугольника, затем заполнить цветом трапецию и треугольник.    

Для анимации строк определяем их длину с помощью JS 

  

Найденная длина для: 

окружности - 138px

трапеции - 60px

треугольника - 35px  


Команды для анимации рисования строк   




    

  


Анимация рисования треугольника начнется, когда закончится анимация
рисования трапеции


begin="an_trap.end"   


Анимация закрашивания трапеции начнется, когда закончится анимация
рисования окружности  

    
Анимация заполнение цветом треугольника начнется, когда закончится
анимация заполнения цветом трапеции



UPD
Поддержка всеми современными браузерами кроме IE, Edge https://caniuse.com/#search=svg%20smil


Ответ 2

CSS решение

Анимация рисования контуров фигур реализуется в этом варианте с помощью правил CSS.
Точно также необходимо определить длину пути для каждой фигуры и использовать её
для анимации изменения атрибута stroke-dashoffset от максимальной значения до нуля.   

Для круга 

.circle {
    fill:none;
    stroke:#FEC558;
    stroke-dashoffset:138.5;
    stroke-dasharray:138.5;
    animation: circle_stroke 2s ease-in forwards;
        } 

    @keyframes circle_stroke {
    0% {
    stroke-dashoffset: 138.5;
    }
    100% {
    stroke-dashoffset: 0;
      }
    } 


Точно также необходимо повторить для трапеции и треугольника. 

Но для этих фигур необходимо добавить ещё анимацию заполнения цветом. 
Правило CSS для совместной анимации будет написано так: 

.trap {
    stroke-dashoffset:60;
    stroke-dasharray:60;
        animation:trap_stroke 2s ease-in-out forwards,  trap_fill  ease-in 3s forwards;

    }

    @keyframes trap_stroke {
    0% {
    stroke-dashoffset: 60.5;
    }

      100% {
    stroke-dashoffset: 0;
      }
    }  

    @keyframes trap_fill {
    0% {
    fill: none;
    }

      100% {
    fill: #FEC558;
      }
    }  


Код для всей анимации:   



 .trap, .triangle {
   stroke:#FEC558;
   stroke-width:0.5;
	fill:none;
   }
	
	.circle {
	fill:none;
	stroke:#FEC558;
	stroke-dashoffset:138.5;
	stroke-dasharray:138.5;
	animation: circle_stroke 2s ease-in forwards;
		} 
	
	@keyframes circle_stroke {
	0% {
   	stroke-dashoffset: 138.5;
	}
	100% {
   	stroke-dashoffset: 0;
	  }
	}
	

	
	
	.trap {
	stroke-dashoffset:60;
	stroke-dasharray:60;
		animation:trap_stroke 2s ease-in-out forwards,  trap_fill  ease-in 3s forwards;
	
	}
	
	@keyframes trap_stroke {
	0% {
   	stroke-dashoffset: 60.5;
	}
		  
	  100% {
   	stroke-dashoffset: 0;
	  }
	}  
	
	@keyframes trap_fill {
	0% {
   	fill: none;
	}
		  
	  100% {
   	fill: #FEC558;
	  }
	}  


	.triangle {
	stroke-dashoffset:35.5;
	stroke-dasharray:35.5;
	
	animation: triangle_stroke 1s ease-in-out forwards, triangle_fill 3.5s ease-in forwards;
	}  
	
	@keyframes triangle_stroke {
	0% {
   	stroke-dashoffset: 35.5;
	}
	100% {
   	stroke-dashoffset: 0;
	  }
	}  
	
	@keyframes triangle_fill {
	0% {
   	fill: none;
	}
	100% {
   	fill: #FEC558;;
	  }
	}
	




  

DEMO

Работает во всех современных браузерах, кроме IE     

"IE10 and IE11 do not support CSS keyframe blocks inside media queries."
(см. вкладку Known Issues  )