안녕하세요.
CSS에서 자주 아래와 같은 애니메이션을 SVG로 설정할 때 있습니다.

완성도

인터넷에서 데려온 HTML5 로고입니다.
코드 자체는 꽤 범용적으로 사용되고 있는 것이며, 그쪽의 해설은 깊게는 하지 않습니다만,
색칠이 여러 개있을 때,

엣코 키프레임 애니메이션에 하나하나 fill !

그렇게 절망한 분도 있니? 어쩌면 최선의 대답이 아닐 수도 있습니다.

결론으로,

fill:currentColor; 사용

입니다.
fill:currentColor 는 그 요소에 설정되어 있는 문자색을 칠에 지정할 수 있다고 하는 것입니다.
요점은

인라인 스타일에서 <path> 요소 등에 문자색을 설정하고 키프레임 애니메이션에서는 fill:currentColor; 를 100% 시점으로 설정하기만 하면 됩니다.

라는 것입니다.

실제로 데모용으로 만든 코드를 살펴보겠습니다.

CSS

        .svg { width: 500px;}
        .svg path{stroke:none; stroke-width:1px; fill:transparent; stroke-dasharray:1425px; stroke-dashoffset:1425px; animation:anim 2s ease-in 0s forwards;}
        @keyframes anim{
            0%{stroke-dashoffset:1425px; stroke: #000;}
            30%{fill:transparent;}
            60%{stroke-dashoffset:0; stroke:none;}
            100%{fill:currentColor;}
        }

HTML

<!-- 一部のみ抜粋 -->
<path d="M255.554813,70.7657143 L232.31367,331.125451 L127.843868,360.087912 L23.6617143,331.166242 L0.445186813,70.7657143 L255.554813,70.7657143 L255.554813,70.7657143 Z" fill="#E44D26" style="color:#E44D26;"></path>
<!-- Fillと一緒の文字色を設定しているのがわかります -->

이것으로 얼마나 색이 많은 SVG가 있어도 힘들지 않네요!
문자색을 문자색의 용도로 사용하고 있는 경우도 있다고 생각하므로, 그 근처는 완벽한 대처법은 아닙니다만. .
도움이되면 다행입니다.