Выполнение анимации SVG вдоль пути

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

У меня есть SVG-файл, который представляет собой плоскую фигуру.
Я хотел бы создать анимацию,   чтобы  фигура постепенно прорисовывалась.
Такой пример анимации, как  с логотипом «S» от бренда Samsung Galaxy S: https://codepen.io/anon/pen/MGawzy
         



@keyframes test {
  0% {
    clip-path: inset(0px 0px 300px 0px);
  }
  80% {
    clip-path: inset(0px 0px 0px 0px);
  }
  100% {
    clip-path: inset(0px 0px 0px 0px);
  }
}

svg {
  animation: test;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}





Простой SVG в приведенном выше примере, легко анимировать, я могу просто медленно
обрезать SVG сверху вниз. 

Но если у меня очень сложная форма, которую я не могу анимировать, например, как
это - (возможно, красная линия на эмблеме NASA: https://upload.wikimedia.org/wikipedia/commons/e/e5/NASA_logo.svg),
то нужно лучшее решение, чем у меня.   

Чтобы снова прояснить, я не хочу оживлять stroke. Я хочу  иметь возможность анимировать
fill (заполнение)    

Есть ли общее решение? Если общего решения нет, то как бы я мог сделать это самостоятельно
в разумные сроки?    

Чтобы дать некоторое представление, я пытаюсь анимировать скрипичный ключ: 
https://upload.wikimedia.org/wikipedia/commons/e/e8/G-clef.svg       

Примечание переводчика:
В данном топике применена оригинальная техника, которая позволяет анимировать рисование
фигур с разной шириной на отдельных участках. Использовать технику  рисования линий
с изменением значений атрибута патча stroke-dashofset в данном примере не получится,
так как нужно прорисовывать не контур фигуры, а сразу всю ширину.
Но одновременное применение масок и изменение stroke-dashoffset даёт нужный результат.
Берите данную технику на вооружение.
    

Ответы

Ответ 1

Вариант CSS


Нарисуйте гладкий path поверх фигуры, который следует по
направлению за тем, что вы считаете направлением анимации, и
выберите такую ширину stroke-width, чтобы path охватывал всю
ширину формы.
Я исключил бы полностью конечную точку  из этого пути, так как она
намного толще остальной фигуры.   
Разделите путь таким образом, чтобы он не перекрывал точку.
Анимируйте фигуру и жирную точку в порядке рисования, убедитесь, что
каждый частичный путь рисуется в правильном направлении.
Теперь разделите фигуру таким же образом, убедившись, что каждая
часть находится точно под path сверху.      
Свяжите каждую фигуру с одним из путей сверху, определяя путь, как
маску для фигуры. Путь должен иметь stroke:white. Сохраните
порядок.
Теперь вы можете анимировать пути, определяющие маски с анимацией
stroke-dashoffset.
Я бы просто спрятал конечную точку, пока анимация псевдо-линии не
закончится, а затем сразу показал ее.     




.clef {
    fill: black;
    stroke: black;
    stroke-width: 0.1;
}
mask path {
    fill: none;
    stroke: white;
    stroke-width: 6;
}
#mask1 path {
    stroke-dasharray: 100.8186 100.8186;
    stroke-dashoffset: 100.8186;
    animation: draw1 1s linear forwards;
}
@keyframes draw1 {
    from { stroke-dashoffset: 100.8186; }
    to { stroke-dashoffset: 0; }
}
#mask2 path {
    stroke-dasharray: 83.6713 83.6713;
    stroke-dashoffset: 83.6713;
    animation: draw2 1s 1s linear forwards;
}
@keyframes draw2 {
    from { stroke-dashoffset: 83.6713; }
    to { stroke-dashoffset: 0; }
}
.dot {
    opacity: 0;
    animation: reveal 0s 2.5s forwards;
}
@keyframes reveal {
    from { opacity: 0; }
    to { opacity: 1; }
}





Источник


Ответ 2

Вариант SVG

Переносим анимацию из стилей непосредственно в патчи масок и фигур.    

Команды реализующие анимацию однотипны для всех патчей: 



Команда появления точки на конце скрипичного ключа :