TransWikia.com

Как убрать результаты работы анимации при повторном запуске анимации?

Stack Overflow на русском Asked on January 2, 2021

На примере ниже видно, что при первом запуске анимации все идет, как и ожидалось: анимация рисования линий с помощью изменения атрибута stroke-dasharray

В формуле анимации этого атрибута есть параметр fill="freeze", который замораживает готовое изображение на дисплее после окончания анимации.
При повторном запуске анимации, часть изображения остается на экране.
Как удалить всё изображение с дисплея, перед началом повторной анимации.

var btn = document.getElementById('btn1');
btn.addEventListener("click",() =>{
  an_body.beginElement();
})
<div><button id="btn1">Click me</button></div>
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="500" viewBox="0 0 800 500" preserveAspectRatio="xMinYMin meet">
<style>
.s0{
    fill:none;
    stroke:black;
    stroke-width:5;
}
#mustache_1,#mustache_2,#mustache_3 {
stroke-width:3;
}

</style>
 <rect width="100%" height="100%" fill="#D6DFE6" />
  <path id="body" class="s0" stroke-dasharray="0 2482" d="m228.8 142c0 0-1 9.2 1.5 12.7 6.9 9.7 20.4 13.6 32.2 15.7 13.1 2.3 27.1 0.1 39.7-4.1 13.2-4.4 24.9-12.8 36-21.3 5.6-4.3 10.6-9.5 15-15 4.6-5.8 9.8-11.6 12-18.7 2.2-7 3.3-14.4 0.7-22.1C360.6 72.7 351.5 65 340.9 56.1 326.1 43.9 308.2 34.5 289.5 30.3c-19.5-4.4-40.4-2.6-59.9 1.5-20.1 4.2-39.6 12.3-56.9 23.2-24.2 15.3-46.2 35-63.7 57.7-18.9 24.5-34 52.7-42.7 82.4-7.7 26.3-10.4 54.7-7.5 82 4.4 41.8 18.8 62.2 37.5 88.1 11.1 15.3 27 26.8 42.7 37.5 13.2 9 27.5 16.8 42.7 21.7 13.5 4.4 27.8 5.4 41.9 6.7 27 2.5 81.3 2.2 81.3 2.2l74.9-0.7c0 0 33.9-0.2 49.4-1 9.3-0.5 13-14.3 15.7-23.2 2.8-9.1 2.3-19.3 0-28.5-2.7-11-8.6-21.2-15.7-30-6.3-7.8-14.8-13.8-23.2-19.3-12.1-7.8-25.1-14.7-39-18.9-12.5-3.8-25.9-5.4-39-5.2-17.9 0.2-35.9 3.4-53.2 8.2-4.7 1.3-13.4 5.5-13.4 5.5 0 0 13.4-17.7 21.2-25.6 9.3-9.4 19.6-18 30.4-25.7 13-9.1 26.8-17.3 41.2-23.9 13.8-6.3 27.9-12.8 42.9-15 18.2-2.7 37.5-2.3 55.2 2.6 14.2 3.9 27.1 12.3 39 21 10.4 7.6 18.8 17.6 27.7 27 7.9 8.3 13.3 24.3 10.5 36.7-2.1 9.1-10.1 17.4-18.7 21-9 3.8-21.6 4.6-29.2-1.5-8.2-6.7-9.4-20.2-8.2-30.7 1.4-12.3 8.8-23.9 17.2-33 8.4-9 19.4-16.7 31.5-19.5 11.7-2.7 25.2-1.6 36 3.7 8.9 4.4 15.6 13 20.2 21.7 4.6 8.6 6.8 19.4 6.7 28.5 0 9.5-16.5 23.2-16.5 23.2 0 0 19.8 2.8 29.2 6 9.7 3.3 19.2 7.6 27.5 13.5 9.6 6.9 17.6 15.9 24.9 25.2 4.7 5.9 11.9 19 11.9 19l9 18c0 0 0.7 15.9 6.7 18.7 3.9 1.8 11.1-0.3 12-4.5 0.4-1.7-2.1-3-3.7-3.7-2.3-1.1-5.1-1.6-7.5-0.7-3.3 1.2-7.5 7.5-7.5 7.5h-26.2l-43.9 0.9c0 0-14.8-0.4-22.2-0.4-13.2-0.1-26.6-0.3-39.7 0.2-16.9 0.6-34.3-0.6-53.8 0.1-15.7 0.5-51.6 0.5-51.6 0.5" >
      <animate id="an_body" attributeName="stroke-dasharray" dur="4s" begin="indefinite" values="0 2482;2482 0" fill="freeze" restart="whenNotActive" />
  
  </path>
  <path id="eye" class="s0" stroke-dasharray="0 43" d="m570.4 371.6c0 0 5.3-5.3 8.5-7.2 2.9-1.7 6.1-3.4 9.5-3.7 3.6-0.3 7.5 0.5 10.7 2.3 3.1 1.7 7.4 7.5 7.4 7.5" >
      <animate id="an_eye" attributeName="stroke-dasharray" dur="1s" begin="an_body.end" values="0 43;43 0" fill="freeze" restart="whenNotActive" />
  
  </path>
  <path id="mustache_1" class="s0" stroke-dasharray="0 110" d="m542.9 462c2.5-8 7-15.1 10.7-22.5 2.5-4.9 5.2-9.7 7.7-14.7 1.2-2.5 2.2-5.1 3.6-7.5 0.6-1.1 1.1-2.1 2-3.2 0.2-0.3 0.5 0.6 0.4 0.9-1 4.9-2.3 8.2-3.8 12.2-1.3 3.4-3.1 6.6-4.8 9.8-1.2 2.3-2.4 4.6-3.6 6.9-1.1 2-2.2 4.1-3.3 6.1-2.2 4-4.6 9-6.8 11.8-1.9 2.4-2.3 0.9-2.1 0.3z" >
      <animate id="an_mustache_1" attributeName="stroke-dasharray" dur="1s" begin="an_eye.end" 
        values="0 110;110 0" fill="freeze" restart="whenNotActive" />
  </path>      
  <path id="mustache_2" class="s0" stroke-dasharray="0 157" d="m589.1 412.5c-1 3.9-0.4 9.7-1.1 14.6-0.8 5.5-2.3 10.9-3.4 16.4-1.2 6-2.7 11.9-3.7 17.9-1.1 6.4-2.4 12.8-2.6 19.3-0.1 1.9-0.3 7.3 0.3 5.6 1.5-5 1.7-7.7 2.6-11.6 1.3-5.6 2.9-11.1 4.3-16.6 1.3-5.2 2.6-10.3 3.5-15.5 0.5-2.8 0.9-5.6 1.2-8.3 0.4-3.7 0.9-7.3 1.1-11 0.2-3.7-0.2-7.1-0.1-11.3 0.1-3.8-1.5-1.6-2 0.5z" >
       <animate id="an_mustache_2" attributeName="stroke-dasharray" dur="1s" begin="an_eye.end" 
        values="0 157;157 0" fill="freeze" restart="whenNotActive" />
  </path>      
  <path id="mustache_3" stroke-dasharray="0 159" class="s0" d="m608.2 408.4c-0.2 4.1 0.6 6.9 1.3 10.3 0.5 2.4 1.4 4.7 2 7 1.3 5.6 1.8 11.4 3.2 16.9 1.5 6.2 3.7 12.2 5.6 18.3 2.4 7.7 4.1 15.7 7.4 22.9 0.2 0.4 1.3 0.3 1.3-0.1-0.3-5.6-1.2-6.9-1.9-10.3-1.2-6.1-2.3-12.3-3.7-18.4-0.9-4-2-7.9-3.2-11.8-0.9-2.9-2-5.6-2.9-8.5-1-3.1-2.1-6.2-3-9.4-1.6-5.4-2.3-9.6-4.5-16.2-0.2-0.6-1.6-1.4-1.6-0.8z">
      <animate id="an_mustache_2" attributeName="stroke-dasharray" dur="1s" begin="an_eye.end" 
        values="0 159;159 0" fill="freeze" restart="whenNotActive" />
  </path>    
      
</svg>
htmljavascriptsvg

2 Answers

Грязный хак подсмотренный на Хабре. "Хак" - потому, что решает проблему, а "грязный" из-за того, что убивает все прелести SMIL (всякие там begin.end и пр.), и нужно всё высчитывать и проставлять вручную. Ну, или писать ещё более продвинутую логику.

По сути, замена - это изъятие и последующая вставка. Вот, между этими событиями и очищается холст, а вставка идёт уже с изменённым атрибутом, поэтому анимация стартует сначала:

let eye = document.getElementById("an_eye");
let mustache_1 = document.getElementById("an_mustache_1");
let mustache_2 = document.getElementById("an_mustache_2");
let mustache_3 = document.getElementById("an_mustache_3");

const btn = document.getElementById('btn1');
btn.addEventListener("click", () => {
  an_body.beginElement();
  eye = fRestartAnim(eye, 3600);
  mustache_1 = fRestartAnim(mustache_1, 5000);
  mustache_2 = fRestartAnim(mustache_2, 5000);
  mustache_3 = fRestartAnim(mustache_3, 5000);
});

function fRestartAnim(an, delay = 0) {
  const anClone = an.cloneNode(true);
  const anParent = an.parentNode;
  anParent.replaceChild(anClone, an);
  anClone.setAttribute("begin", performance.now() + delay + "ms");
  return anClone;
}
<div><button id="btn1">Click me</button></div>
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="500" viewBox="0 0 800 500" preserveAspectRatio="xMinYMin meet">
  <style>
  .s0 {
    fill: none;
    stroke: black;
    stroke-width: 5;
  }
  #mustache_1, #mustache_2, #mustache_3 {
    stroke-width: 3;
  }
  </style>
  <rect width="100%" height="100%" fill="#D6DFE6" />
  <path id="body" class="s0" stroke-dasharray="0 2482" d="m228.8 142c0 0-1 9.2 1.5 12.7 6.9 9.7 20.4 13.6 32.2 15.7 13.1 2.3 27.1 0.1 39.7-4.1 13.2-4.4 24.9-12.8 36-21.3 5.6-4.3 10.6-9.5 15-15 4.6-5.8 9.8-11.6 12-18.7 2.2-7 3.3-14.4 0.7-22.1C360.6 72.7 351.5 65 340.9 56.1 326.1 43.9 308.2 34.5 289.5 30.3c-19.5-4.4-40.4-2.6-59.9 1.5-20.1 4.2-39.6 12.3-56.9 23.2-24.2 15.3-46.2 35-63.7 57.7-18.9 24.5-34 52.7-42.7 82.4-7.7 26.3-10.4 54.7-7.5 82 4.4 41.8 18.8 62.2 37.5 88.1 11.1 15.3 27 26.8 42.7 37.5 13.2 9 27.5 16.8 42.7 21.7 13.5 4.4 27.8 5.4 41.9 6.7 27 2.5 81.3 2.2 81.3 2.2l74.9-0.7c0 0 33.9-0.2 49.4-1 9.3-0.5 13-14.3 15.7-23.2 2.8-9.1 2.3-19.3 0-28.5-2.7-11-8.6-21.2-15.7-30-6.3-7.8-14.8-13.8-23.2-19.3-12.1-7.8-25.1-14.7-39-18.9-12.5-3.8-25.9-5.4-39-5.2-17.9 0.2-35.9 3.4-53.2 8.2-4.7 1.3-13.4 5.5-13.4 5.5 0 0 13.4-17.7 21.2-25.6 9.3-9.4 19.6-18 30.4-25.7 13-9.1 26.8-17.3 41.2-23.9 13.8-6.3 27.9-12.8 42.9-15 18.2-2.7 37.5-2.3 55.2 2.6 14.2 3.9 27.1 12.3 39 21 10.4 7.6 18.8 17.6 27.7 27 7.9 8.3 13.3 24.3 10.5 36.7-2.1 9.1-10.1 17.4-18.7 21-9 3.8-21.6 4.6-29.2-1.5-8.2-6.7-9.4-20.2-8.2-30.7 1.4-12.3 8.8-23.9 17.2-33 8.4-9 19.4-16.7 31.5-19.5 11.7-2.7 25.2-1.6 36 3.7 8.9 4.4 15.6 13 20.2 21.7 4.6 8.6 6.8 19.4 6.7 28.5 0 9.5-16.5 23.2-16.5 23.2 0 0 19.8 2.8 29.2 6 9.7 3.3 19.2 7.6 27.5 13.5 9.6 6.9 17.6 15.9 24.9 25.2 4.7 5.9 11.9 19 11.9 19l9 18c0 0 0.7 15.9 6.7 18.7 3.9 1.8 11.1-0.3 12-4.5 0.4-1.7-2.1-3-3.7-3.7-2.3-1.1-5.1-1.6-7.5-0.7-3.3 1.2-7.5 7.5-7.5 7.5h-26.2l-43.9 0.9c0 0-14.8-0.4-22.2-0.4-13.2-0.1-26.6-0.3-39.7 0.2-16.9 0.6-34.3-0.6-53.8 0.1-15.7 0.5-51.6 0.5-51.6 0.5" >
    <animate id="an_body" attributeName="stroke-dasharray" dur="4s" begin="indefinite" values="0 2482;2482 0" fill="freeze" restart="whenNotActive" />
  </path>
  <path id="eye" class="s0" stroke-dasharray="0 43" d="m570.4 371.6c0 0 5.3-5.3 8.5-7.2 2.9-1.7 6.1-3.4 9.5-3.7 3.6-0.3 7.5 0.5 10.7 2.3 3.1 1.7 7.4 7.5 7.4 7.5" >
    <animate id="an_eye" attributeName="stroke-dasharray" dur="1s" begin="indefinite" values="0 43;43 0" fill="freeze" restart="whenNotActive" />
  </path>
  <path id="mustache_1" class="s0" stroke-dasharray="0 110" d="m542.9 462c2.5-8 7-15.1 10.7-22.5 2.5-4.9 5.2-9.7 7.7-14.7 1.2-2.5 2.2-5.1 3.6-7.5 0.6-1.1 1.1-2.1 2-3.2 0.2-0.3 0.5 0.6 0.4 0.9-1 4.9-2.3 8.2-3.8 12.2-1.3 3.4-3.1 6.6-4.8 9.8-1.2 2.3-2.4 4.6-3.6 6.9-1.1 2-2.2 4.1-3.3 6.1-2.2 4-4.6 9-6.8 11.8-1.9 2.4-2.3 0.9-2.1 0.3z" >
    <animate id="an_mustache_1" attributeName="stroke-dasharray" dur="1s" begin="indefinite" 
        values="0 110;110 0" fill="freeze" restart="whenNotActive" />
  </path>
  <path id="mustache_2" class="s0" stroke-dasharray="0 157" d="m589.1 412.5c-1 3.9-0.4 9.7-1.1 14.6-0.8 5.5-2.3 10.9-3.4 16.4-1.2 6-2.7 11.9-3.7 17.9-1.1 6.4-2.4 12.8-2.6 19.3-0.1 1.9-0.3 7.3 0.3 5.6 1.5-5 1.7-7.7 2.6-11.6 1.3-5.6 2.9-11.1 4.3-16.6 1.3-5.2 2.6-10.3 3.5-15.5 0.5-2.8 0.9-5.6 1.2-8.3 0.4-3.7 0.9-7.3 1.1-11 0.2-3.7-0.2-7.1-0.1-11.3 0.1-3.8-1.5-1.6-2 0.5z" >
    <animate id="an_mustache_2" attributeName="stroke-dasharray" dur="1s" begin="indefinite" 
        values="0 157;157 0" fill="freeze" restart="whenNotActive" />
  </path>
  <path id="mustache_3" stroke-dasharray="0 159" class="s0" d="m608.2 408.4c-0.2 4.1 0.6 6.9 1.3 10.3 0.5 2.4 1.4 4.7 2 7 1.3 5.6 1.8 11.4 3.2 16.9 1.5 6.2 3.7 12.2 5.6 18.3 2.4 7.7 4.1 15.7 7.4 22.9 0.2 0.4 1.3 0.3 1.3-0.1-0.3-5.6-1.2-6.9-1.9-10.3-1.2-6.1-2.3-12.3-3.7-18.4-0.9-4-2-7.9-3.2-11.8-0.9-2.9-2-5.6-2.9-8.5-1-3.1-2.1-6.2-3-9.4-1.6-5.4-2.3-9.6-4.5-16.2-0.2-0.6-1.6-1.4-1.6-0.8z">
    <animate id="an_mustache_3" attributeName="stroke-dasharray" dur="1s" begin="indefinite" 
        values="0 159;159 0" fill="freeze" restart="whenNotActive" />
  </path>
</svg>

Correct answer by UModeL on January 2, 2021

В ответе @UModeL найдено хорошее решение. Очень часто, при создании анимаций, приходилось идти на всяческие ухищрения, чтобы замаскировать повторную прорисовку поверх уже оставшихся линий

"Хак" - потому, что решает проблему, а "грязный" из-за того, что убивает все прелести SMIL (всякие там begin.end и пр.), и нужно всё высчитывать и проставлять вручную.

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

Основная проблема в том, что крайние анимации, отработав своё. оставляют (замораживают) снимок результатов анимации. Делает это команда fill="freeze" Её можно убрать, но тогда анимацию будет видно только в процессе выполнения.

Я сделал небольшое исследование, чтобы понять отчего и при каких условиях остаются следы прошлых анимаций.

#1. Если анимация одна, то при повторном запуске анимации следов не остается

<div><button id="btn1">Click me</button></div>
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="500" viewBox="0 0 800 500" preserveAspectRatio="xMinYMin meet">
<style>
.s0{
    fill:none;
    stroke:black;
    stroke-width:5;
}

</style>
 <rect width="100%" height="100%" fill="#D6DFE6" />
  <path id="body" class="s0" stroke-dasharray="0 2482" d="m228.8 142c0 0-1 9.2 1.5 12.7 6.9 9.7 20.4 13.6 32.2 15.7 13.1 2.3 27.1 0.1 39.7-4.1 13.2-4.4 24.9-12.8 36-21.3 5.6-4.3 10.6-9.5 15-15 4.6-5.8 9.8-11.6 12-18.7 2.2-7 3.3-14.4 0.7-22.1C360.6 72.7 351.5 65 340.9 56.1 326.1 43.9 308.2 34.5 289.5 30.3c-19.5-4.4-40.4-2.6-59.9 1.5-20.1 4.2-39.6 12.3-56.9 23.2-24.2 15.3-46.2 35-63.7 57.7-18.9 24.5-34 52.7-42.7 82.4-7.7 26.3-10.4 54.7-7.5 82 4.4 41.8 18.8 62.2 37.5 88.1 11.1 15.3 27 26.8 42.7 37.5 13.2 9 27.5 16.8 42.7 21.7 13.5 4.4 27.8 5.4 41.9 6.7 27 2.5 81.3 2.2 81.3 2.2l74.9-0.7c0 0 33.9-0.2 49.4-1 9.3-0.5 13-14.3 15.7-23.2 2.8-9.1 2.3-19.3 0-28.5-2.7-11-8.6-21.2-15.7-30-6.3-7.8-14.8-13.8-23.2-19.3-12.1-7.8-25.1-14.7-39-18.9-12.5-3.8-25.9-5.4-39-5.2-17.9 0.2-35.9 3.4-53.2 8.2-4.7 1.3-13.4 5.5-13.4 5.5 0 0 13.4-17.7 21.2-25.6 9.3-9.4 19.6-18 30.4-25.7 13-9.1 26.8-17.3 41.2-23.9 13.8-6.3 27.9-12.8 42.9-15 18.2-2.7 37.5-2.3 55.2 2.6 14.2 3.9 27.1 12.3 39 21 10.4 7.6 18.8 17.6 27.7 27 7.9 8.3 13.3 24.3 10.5 36.7-2.1 9.1-10.1 17.4-18.7 21-9 3.8-21.6 4.6-29.2-1.5-8.2-6.7-9.4-20.2-8.2-30.7 1.4-12.3 8.8-23.9 17.2-33 8.4-9 19.4-16.7 31.5-19.5 11.7-2.7 25.2-1.6 36 3.7 8.9 4.4 15.6 13 20.2 21.7 4.6 8.6 6.8 19.4 6.7 28.5 0 9.5-16.5 23.2-16.5 23.2 0 0 19.8 2.8 29.2 6 9.7 3.3 19.2 7.6 27.5 13.5 9.6 6.9 17.6 15.9 24.9 25.2 4.7 5.9 11.9 19 11.9 19l9 18c0 0 0.7 15.9 6.7 18.7 3.9 1.8 11.1-0.3 12-4.5 0.4-1.7-2.1-3-3.7-3.7-2.3-1.1-5.1-1.6-7.5-0.7-3.3 1.2-7.5 7.5-7.5 7.5h-26.2l-43.9 0.9c0 0-14.8-0.4-22.2-0.4-13.2-0.1-26.6-0.3-39.7 0.2-16.9 0.6-34.3-0.6-53.8 0.1-15.7 0.5-51.6 0.5-51.6 0.5" >
      <animate id="an_body" attributeName="stroke-dasharray" dur="1.5s" begin="svg1.click" values="0 2482;2482 0" fill="freeze" restart="whenNotActive" />
  
  </path>
       
</svg>
<script>
var btn = document.getElementById('btn1');
btn.addEventListener("click",() =>{
  an_body.beginElement();
})
</script>

#2. Можно зациклить эту анимацию с некоторой паузой (1s) между повторениями, результат будет тот же

begin="svg1.click;an_body.end+1s"

<div><button id="btn1">Click me</button></div>
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="500" viewBox="0 0 800 500" preserveAspectRatio="xMinYMin meet">
<style>
.s0{
    fill:none;
    stroke:black;
    stroke-width:5;
}

</style>
 <rect width="100%" height="100%" fill="#D6DFE6" />
  <path id="body" class="s0" stroke-dasharray="0 2482" d="m228.8 142c0 0-1 9.2 1.5 12.7 6.9 9.7 20.4 13.6 32.2 15.7 13.1 2.3 27.1 0.1 39.7-4.1 13.2-4.4 24.9-12.8 36-21.3 5.6-4.3 10.6-9.5 15-15 4.6-5.8 9.8-11.6 12-18.7 2.2-7 3.3-14.4 0.7-22.1C360.6 72.7 351.5 65 340.9 56.1 326.1 43.9 308.2 34.5 289.5 30.3c-19.5-4.4-40.4-2.6-59.9 1.5-20.1 4.2-39.6 12.3-56.9 23.2-24.2 15.3-46.2 35-63.7 57.7-18.9 24.5-34 52.7-42.7 82.4-7.7 26.3-10.4 54.7-7.5 82 4.4 41.8 18.8 62.2 37.5 88.1 11.1 15.3 27 26.8 42.7 37.5 13.2 9 27.5 16.8 42.7 21.7 13.5 4.4 27.8 5.4 41.9 6.7 27 2.5 81.3 2.2 81.3 2.2l74.9-0.7c0 0 33.9-0.2 49.4-1 9.3-0.5 13-14.3 15.7-23.2 2.8-9.1 2.3-19.3 0-28.5-2.7-11-8.6-21.2-15.7-30-6.3-7.8-14.8-13.8-23.2-19.3-12.1-7.8-25.1-14.7-39-18.9-12.5-3.8-25.9-5.4-39-5.2-17.9 0.2-35.9 3.4-53.2 8.2-4.7 1.3-13.4 5.5-13.4 5.5 0 0 13.4-17.7 21.2-25.6 9.3-9.4 19.6-18 30.4-25.7 13-9.1 26.8-17.3 41.2-23.9 13.8-6.3 27.9-12.8 42.9-15 18.2-2.7 37.5-2.3 55.2 2.6 14.2 3.9 27.1 12.3 39 21 10.4 7.6 18.8 17.6 27.7 27 7.9 8.3 13.3 24.3 10.5 36.7-2.1 9.1-10.1 17.4-18.7 21-9 3.8-21.6 4.6-29.2-1.5-8.2-6.7-9.4-20.2-8.2-30.7 1.4-12.3 8.8-23.9 17.2-33 8.4-9 19.4-16.7 31.5-19.5 11.7-2.7 25.2-1.6 36 3.7 8.9 4.4 15.6 13 20.2 21.7 4.6 8.6 6.8 19.4 6.7 28.5 0 9.5-16.5 23.2-16.5 23.2 0 0 19.8 2.8 29.2 6 9.7 3.3 19.2 7.6 27.5 13.5 9.6 6.9 17.6 15.9 24.9 25.2 4.7 5.9 11.9 19 11.9 19l9 18c0 0 0.7 15.9 6.7 18.7 3.9 1.8 11.1-0.3 12-4.5 0.4-1.7-2.1-3-3.7-3.7-2.3-1.1-5.1-1.6-7.5-0.7-3.3 1.2-7.5 7.5-7.5 7.5h-26.2l-43.9 0.9c0 0-14.8-0.4-22.2-0.4-13.2-0.1-26.6-0.3-39.7 0.2-16.9 0.6-34.3-0.6-53.8 0.1-15.7 0.5-51.6 0.5-51.6 0.5" >
      <animate id="an_body" attributeName="stroke-dasharray" dur="1.5s" begin="svg1.click;an_body.end+1s" values="0 2482;2482 0" fill="freeze" restart="whenNotActive" />
  
  </path>
       
</svg>
<script>
var btn = document.getElementById('btn1');
btn.addEventListener("click",() =>{
  an_body.beginElement();
})
</script>

#3. Несколько анимаций запускаются одновременно по клику на холсте SVG begin="svg1.click" и имеют одинаковое время продолжительности. dur="4s"

<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="500" viewBox="0 0 800 500" preserveAspectRatio="xMinYMin meet">
<style>
.s0{
    fill:none;
    stroke:black;
    stroke-width:5;
}
#mustache_1,#mustache_2,#mustache_3 {
stroke-width:3;
}

</style>
 <rect width="100%" height="100%" fill="#D6DFE6" />
  <path id="body" class="s0" stroke-dasharray="0 2482" d="m228.8 142c0 0-1 9.2 1.5 12.7 6.9 9.7 20.4 13.6 32.2 15.7 13.1 2.3 27.1 0.1 39.7-4.1 13.2-4.4 24.9-12.8 36-21.3 5.6-4.3 10.6-9.5 15-15 4.6-5.8 9.8-11.6 12-18.7 2.2-7 3.3-14.4 0.7-22.1C360.6 72.7 351.5 65 340.9 56.1 326.1 43.9 308.2 34.5 289.5 30.3c-19.5-4.4-40.4-2.6-59.9 1.5-20.1 4.2-39.6 12.3-56.9 23.2-24.2 15.3-46.2 35-63.7 57.7-18.9 24.5-34 52.7-42.7 82.4-7.7 26.3-10.4 54.7-7.5 82 4.4 41.8 18.8 62.2 37.5 88.1 11.1 15.3 27 26.8 42.7 37.5 13.2 9 27.5 16.8 42.7 21.7 13.5 4.4 27.8 5.4 41.9 6.7 27 2.5 81.3 2.2 81.3 2.2l74.9-0.7c0 0 33.9-0.2 49.4-1 9.3-0.5 13-14.3 15.7-23.2 2.8-9.1 2.3-19.3 0-28.5-2.7-11-8.6-21.2-15.7-30-6.3-7.8-14.8-13.8-23.2-19.3-12.1-7.8-25.1-14.7-39-18.9-12.5-3.8-25.9-5.4-39-5.2-17.9 0.2-35.9 3.4-53.2 8.2-4.7 1.3-13.4 5.5-13.4 5.5 0 0 13.4-17.7 21.2-25.6 9.3-9.4 19.6-18 30.4-25.7 13-9.1 26.8-17.3 41.2-23.9 13.8-6.3 27.9-12.8 42.9-15 18.2-2.7 37.5-2.3 55.2 2.6 14.2 3.9 27.1 12.3 39 21 10.4 7.6 18.8 17.6 27.7 27 7.9 8.3 13.3 24.3 10.5 36.7-2.1 9.1-10.1 17.4-18.7 21-9 3.8-21.6 4.6-29.2-1.5-8.2-6.7-9.4-20.2-8.2-30.7 1.4-12.3 8.8-23.9 17.2-33 8.4-9 19.4-16.7 31.5-19.5 11.7-2.7 25.2-1.6 36 3.7 8.9 4.4 15.6 13 20.2 21.7 4.6 8.6 6.8 19.4 6.7 28.5 0 9.5-16.5 23.2-16.5 23.2 0 0 19.8 2.8 29.2 6 9.7 3.3 19.2 7.6 27.5 13.5 9.6 6.9 17.6 15.9 24.9 25.2 4.7 5.9 11.9 19 11.9 19l9 18c0 0 0.7 15.9 6.7 18.7 3.9 1.8 11.1-0.3 12-4.5 0.4-1.7-2.1-3-3.7-3.7-2.3-1.1-5.1-1.6-7.5-0.7-3.3 1.2-7.5 7.5-7.5 7.5h-26.2l-43.9 0.9c0 0-14.8-0.4-22.2-0.4-13.2-0.1-26.6-0.3-39.7 0.2-16.9 0.6-34.3-0.6-53.8 0.1-15.7 0.5-51.6 0.5-51.6 0.5" >
      <animate id="an_body" attributeName="stroke-dasharray" dur="4s" begin="svg1.click" values="0 2482;2482 0" fill="freeze" restart="whenNotActive" />
  
  </path>
  <path id="eye" class="s0" stroke-dasharray="0 43" d="m570.4 371.6c0 0 5.3-5.3 8.5-7.2 2.9-1.7 6.1-3.4 9.5-3.7 3.6-0.3 7.5 0.5 10.7 2.3 3.1 1.7 7.4 7.5 7.4 7.5" >
      <animate id="an_eye" attributeName="stroke-dasharray" dur="4s" begin="svg1.click" values="0 43;43 0" fill="freeze" restart="whenNotActive" />
  
  </path>
  <path id="mustache_1" class="s0" stroke-dasharray="0 110" d="m542.9 462c2.5-8 7-15.1 10.7-22.5 2.5-4.9 5.2-9.7 7.7-14.7 1.2-2.5 2.2-5.1 3.6-7.5 0.6-1.1 1.1-2.1 2-3.2 0.2-0.3 0.5 0.6 0.4 0.9-1 4.9-2.3 8.2-3.8 12.2-1.3 3.4-3.1 6.6-4.8 9.8-1.2 2.3-2.4 4.6-3.6 6.9-1.1 2-2.2 4.1-3.3 6.1-2.2 4-4.6 9-6.8 11.8-1.9 2.4-2.3 0.9-2.1 0.3z" >
      <animate id="an_mustache_1" attributeName="stroke-dasharray" dur="4s" begin="svg1.click" 
        values="0 110;110 0" fill="freeze" restart="whenNotActive" />
  </path>      
  <path id="mustache_2" class="s0" stroke-dasharray="0 157" d="m589.1 412.5c-1 3.9-0.4 9.7-1.1 14.6-0.8 5.5-2.3 10.9-3.4 16.4-1.2 6-2.7 11.9-3.7 17.9-1.1 6.4-2.4 12.8-2.6 19.3-0.1 1.9-0.3 7.3 0.3 5.6 1.5-5 1.7-7.7 2.6-11.6 1.3-5.6 2.9-11.1 4.3-16.6 1.3-5.2 2.6-10.3 3.5-15.5 0.5-2.8 0.9-5.6 1.2-8.3 0.4-3.7 0.9-7.3 1.1-11 0.2-3.7-0.2-7.1-0.1-11.3 0.1-3.8-1.5-1.6-2 0.5z" >
       <animate id="an_mustache_2" attributeName="stroke-dasharray" dur="4s" begin="svg1.click" 
        values="0 157;157 0" fill="freeze" restart="whenNotActive" />
  </path>      
  <path id="mustache_3" stroke-dasharray="0 159" class="s0" d="m608.2 408.4c-0.2 4.1 0.6 6.9 1.3 10.3 0.5 2.4 1.4 4.7 2 7 1.3 5.6 1.8 11.4 3.2 16.9 1.5 6.2 3.7 12.2 5.6 18.3 2.4 7.7 4.1 15.7 7.4 22.9 0.2 0.4 1.3 0.3 1.3-0.1-0.3-5.6-1.2-6.9-1.9-10.3-1.2-6.1-2.3-12.3-3.7-18.4-0.9-4-2-7.9-3.2-11.8-0.9-2.9-2-5.6-2.9-8.5-1-3.1-2.1-6.2-3-9.4-1.6-5.4-2.3-9.6-4.5-16.2-0.2-0.6-1.6-1.4-1.6-0.8z">
      <animate id="an_mustache_3" attributeName="stroke-dasharray" dur="4s" begin="svg1.click" 
        values="0 159;159 0" fill="freeze" restart="whenNotActive" />
  </path>    
      
</svg>

#4. Несколько анимаций стартуют одновременно begin="svg1.click", но разная продолжительность анимаций: dur= "4s", 3s, 2s, 1s

<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="500" viewBox="0 0 800 500" preserveAspectRatio="xMinYMin meet">
<style>
.s0{
    fill:none;
    stroke:black;
    stroke-width:5;
}
#mustache_1,#mustache_2,#mustache_3 {
stroke-width:3;
}

</style>
 <rect width="100%" height="100%" fill="#D6DFE6" />
  <path id="body" class="s0" stroke-dasharray="0 2482" d="m228.8 142c0 0-1 9.2 1.5 12.7 6.9 9.7 20.4 13.6 32.2 15.7 13.1 2.3 27.1 0.1 39.7-4.1 13.2-4.4 24.9-12.8 36-21.3 5.6-4.3 10.6-9.5 15-15 4.6-5.8 9.8-11.6 12-18.7 2.2-7 3.3-14.4 0.7-22.1C360.6 72.7 351.5 65 340.9 56.1 326.1 43.9 308.2 34.5 289.5 30.3c-19.5-4.4-40.4-2.6-59.9 1.5-20.1 4.2-39.6 12.3-56.9 23.2-24.2 15.3-46.2 35-63.7 57.7-18.9 24.5-34 52.7-42.7 82.4-7.7 26.3-10.4 54.7-7.5 82 4.4 41.8 18.8 62.2 37.5 88.1 11.1 15.3 27 26.8 42.7 37.5 13.2 9 27.5 16.8 42.7 21.7 13.5 4.4 27.8 5.4 41.9 6.7 27 2.5 81.3 2.2 81.3 2.2l74.9-0.7c0 0 33.9-0.2 49.4-1 9.3-0.5 13-14.3 15.7-23.2 2.8-9.1 2.3-19.3 0-28.5-2.7-11-8.6-21.2-15.7-30-6.3-7.8-14.8-13.8-23.2-19.3-12.1-7.8-25.1-14.7-39-18.9-12.5-3.8-25.9-5.4-39-5.2-17.9 0.2-35.9 3.4-53.2 8.2-4.7 1.3-13.4 5.5-13.4 5.5 0 0 13.4-17.7 21.2-25.6 9.3-9.4 19.6-18 30.4-25.7 13-9.1 26.8-17.3 41.2-23.9 13.8-6.3 27.9-12.8 42.9-15 18.2-2.7 37.5-2.3 55.2 2.6 14.2 3.9 27.1 12.3 39 21 10.4 7.6 18.8 17.6 27.7 27 7.9 8.3 13.3 24.3 10.5 36.7-2.1 9.1-10.1 17.4-18.7 21-9 3.8-21.6 4.6-29.2-1.5-8.2-6.7-9.4-20.2-8.2-30.7 1.4-12.3 8.8-23.9 17.2-33 8.4-9 19.4-16.7 31.5-19.5 11.7-2.7 25.2-1.6 36 3.7 8.9 4.4 15.6 13 20.2 21.7 4.6 8.6 6.8 19.4 6.7 28.5 0 9.5-16.5 23.2-16.5 23.2 0 0 19.8 2.8 29.2 6 9.7 3.3 19.2 7.6 27.5 13.5 9.6 6.9 17.6 15.9 24.9 25.2 4.7 5.9 11.9 19 11.9 19l9 18c0 0 0.7 15.9 6.7 18.7 3.9 1.8 11.1-0.3 12-4.5 0.4-1.7-2.1-3-3.7-3.7-2.3-1.1-5.1-1.6-7.5-0.7-3.3 1.2-7.5 7.5-7.5 7.5h-26.2l-43.9 0.9c0 0-14.8-0.4-22.2-0.4-13.2-0.1-26.6-0.3-39.7 0.2-16.9 0.6-34.3-0.6-53.8 0.1-15.7 0.5-51.6 0.5-51.6 0.5" >
      <animate id="an_body" attributeName="stroke-dasharray" dur="4s" begin="svg1.click" values="0 2482;2482 0" fill="freeze" restart="whenNotActive" />
  
  </path>
  <path id="eye" class="s0" stroke-dasharray="0 43" d="m570.4 371.6c0 0 5.3-5.3 8.5-7.2 2.9-1.7 6.1-3.4 9.5-3.7 3.6-0.3 7.5 0.5 10.7 2.3 3.1 1.7 7.4 7.5 7.4 7.5" >
      <animate id="an_eye" attributeName="stroke-dasharray" dur="1s" begin="svg1.click" values="0 43;43 0" fill="freeze" restart="whenNotActive" />
  
  </path>
  <path id="mustache_1" class="s0" stroke-dasharray="0 110" d="m542.9 462c2.5-8 7-15.1 10.7-22.5 2.5-4.9 5.2-9.7 7.7-14.7 1.2-2.5 2.2-5.1 3.6-7.5 0.6-1.1 1.1-2.1 2-3.2 0.2-0.3 0.5 0.6 0.4 0.9-1 4.9-2.3 8.2-3.8 12.2-1.3 3.4-3.1 6.6-4.8 9.8-1.2 2.3-2.4 4.6-3.6 6.9-1.1 2-2.2 4.1-3.3 6.1-2.2 4-4.6 9-6.8 11.8-1.9 2.4-2.3 0.9-2.1 0.3z" >
      <animate id="an_mustache_1" attributeName="stroke-dasharray" dur="2s" begin="svg1.click" 
        values="0 110;110 0" fill="freeze" restart="whenNotActive" />
  </path>      
  <path id="mustache_2" class="s0" stroke-dasharray="0 157" d="m589.1 412.5c-1 3.9-0.4 9.7-1.1 14.6-0.8 5.5-2.3 10.9-3.4 16.4-1.2 6-2.7 11.9-3.7 17.9-1.1 6.4-2.4 12.8-2.6 19.3-0.1 1.9-0.3 7.3 0.3 5.6 1.5-5 1.7-7.7 2.6-11.6 1.3-5.6 2.9-11.1 4.3-16.6 1.3-5.2 2.6-10.3 3.5-15.5 0.5-2.8 0.9-5.6 1.2-8.3 0.4-3.7 0.9-7.3 1.1-11 0.2-3.7-0.2-7.1-0.1-11.3 0.1-3.8-1.5-1.6-2 0.5z" >
       <animate id="an_mustache_2" attributeName="stroke-dasharray" dur="3s" begin="svg1.click" 
        values="0 157;157 0" fill="freeze" restart="whenNotActive" />
  </path>      
  <path id="mustache_3" stroke-dasharray="0 159" class="s0" d="m608.2 408.4c-0.2 4.1 0.6 6.9 1.3 10.3 0.5 2.4 1.4 4.7 2 7 1.3 5.6 1.8 11.4 3.2 16.9 1.5 6.2 3.7 12.2 5.6 18.3 2.4 7.7 4.1 15.7 7.4 22.9 0.2 0.4 1.3 0.3 1.3-0.1-0.3-5.6-1.2-6.9-1.9-10.3-1.2-6.1-2.3-12.3-3.7-18.4-0.9-4-2-7.9-3.2-11.8-0.9-2.9-2-5.6-2.9-8.5-1-3.1-2.1-6.2-3-9.4-1.6-5.4-2.3-9.6-4.5-16.2-0.2-0.6-1.6-1.4-1.6-0.8z">
      <animate id="an_mustache_3" attributeName="stroke-dasharray" dur="4s" begin="svg1.click" 
        values="0 159;159 0" fill="freeze" restart="whenNotActive" />
  </path>    
      
</svg>

Промежуточный вывод

Следов работы анимаций SVG не будет видно, если при повторном запуске:

  1. Запуск всех анимаций, входящих в одно приложение SVG произведен одновременно
  2. Продолжительность входящих анимаций не влияет на результат.

5#. Разное время запуска анимаций. Запуск с задержкой, относительно первой анимации

begin="svg1.click+2s"

<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="500" viewBox="0 0 800 500" preserveAspectRatio="xMinYMin meet">
<style>
.s0{
    fill:none;
    stroke:black;
    stroke-width:5;
}
#mustache_1,#mustache_2,#mustache_3 {
stroke-width:3;
}

</style>
 <rect width="100%" height="100%" fill="#D6DFE6" />
  <path id="body" class="s0" stroke-dasharray="0 2482" d="m228.8 142c0 0-1 9.2 1.5 12.7 6.9 9.7 20.4 13.6 32.2 15.7 13.1 2.3 27.1 0.1 39.7-4.1 13.2-4.4 24.9-12.8 36-21.3 5.6-4.3 10.6-9.5 15-15 4.6-5.8 9.8-11.6 12-18.7 2.2-7 3.3-14.4 0.7-22.1C360.6 72.7 351.5 65 340.9 56.1 326.1 43.9 308.2 34.5 289.5 30.3c-19.5-4.4-40.4-2.6-59.9 1.5-20.1 4.2-39.6 12.3-56.9 23.2-24.2 15.3-46.2 35-63.7 57.7-18.9 24.5-34 52.7-42.7 82.4-7.7 26.3-10.4 54.7-7.5 82 4.4 41.8 18.8 62.2 37.5 88.1 11.1 15.3 27 26.8 42.7 37.5 13.2 9 27.5 16.8 42.7 21.7 13.5 4.4 27.8 5.4 41.9 6.7 27 2.5 81.3 2.2 81.3 2.2l74.9-0.7c0 0 33.9-0.2 49.4-1 9.3-0.5 13-14.3 15.7-23.2 2.8-9.1 2.3-19.3 0-28.5-2.7-11-8.6-21.2-15.7-30-6.3-7.8-14.8-13.8-23.2-19.3-12.1-7.8-25.1-14.7-39-18.9-12.5-3.8-25.9-5.4-39-5.2-17.9 0.2-35.9 3.4-53.2 8.2-4.7 1.3-13.4 5.5-13.4 5.5 0 0 13.4-17.7 21.2-25.6 9.3-9.4 19.6-18 30.4-25.7 13-9.1 26.8-17.3 41.2-23.9 13.8-6.3 27.9-12.8 42.9-15 18.2-2.7 37.5-2.3 55.2 2.6 14.2 3.9 27.1 12.3 39 21 10.4 7.6 18.8 17.6 27.7 27 7.9 8.3 13.3 24.3 10.5 36.7-2.1 9.1-10.1 17.4-18.7 21-9 3.8-21.6 4.6-29.2-1.5-8.2-6.7-9.4-20.2-8.2-30.7 1.4-12.3 8.8-23.9 17.2-33 8.4-9 19.4-16.7 31.5-19.5 11.7-2.7 25.2-1.6 36 3.7 8.9 4.4 15.6 13 20.2 21.7 4.6 8.6 6.8 19.4 6.7 28.5 0 9.5-16.5 23.2-16.5 23.2 0 0 19.8 2.8 29.2 6 9.7 3.3 19.2 7.6 27.5 13.5 9.6 6.9 17.6 15.9 24.9 25.2 4.7 5.9 11.9 19 11.9 19l9 18c0 0 0.7 15.9 6.7 18.7 3.9 1.8 11.1-0.3 12-4.5 0.4-1.7-2.1-3-3.7-3.7-2.3-1.1-5.1-1.6-7.5-0.7-3.3 1.2-7.5 7.5-7.5 7.5h-26.2l-43.9 0.9c0 0-14.8-0.4-22.2-0.4-13.2-0.1-26.6-0.3-39.7 0.2-16.9 0.6-34.3-0.6-53.8 0.1-15.7 0.5-51.6 0.5-51.6 0.5" >
      <animate id="an_body" attributeName="stroke-dasharray" dur="4s" begin="svg1.click" values="0 2482;2482 0" fill="freeze" restart="whenNotActive" />
  
  </path>
  <path id="eye" class="s0" stroke-dasharray="0 43" d="m570.4 371.6c0 0 5.3-5.3 8.5-7.2 2.9-1.7 6.1-3.4 9.5-3.7 3.6-0.3 7.5 0.5 10.7 2.3 3.1 1.7 7.4 7.5 7.4 7.5" >
      <animate id="an_eye" attributeName="stroke-dasharray" dur="1s" begin="svg1.click+3s" values="0 43;43 0" fill="freeze" restart="whenNotActive" />
  
  </path>
  <path id="mustache_1" class="s0" stroke-dasharray="0 110" d="m542.9 462c2.5-8 7-15.1 10.7-22.5 2.5-4.9 5.2-9.7 7.7-14.7 1.2-2.5 2.2-5.1 3.6-7.5 0.6-1.1 1.1-2.1 2-3.2 0.2-0.3 0.5 0.6 0.4 0.9-1 4.9-2.3 8.2-3.8 12.2-1.3 3.4-3.1 6.6-4.8 9.8-1.2 2.3-2.4 4.6-3.6 6.9-1.1 2-2.2 4.1-3.3 6.1-2.2 4-4.6 9-6.8 11.8-1.9 2.4-2.3 0.9-2.1 0.3z" >
      <animate id="an_mustache_1" attributeName="stroke-dasharray" dur="2s" begin="svg1.click" 
        values="0 110;110 0" fill="freeze" restart="whenNotActive" />
  </path>      
  <path id="mustache_2" class="s0" stroke-dasharray="0 157" d="m589.1 412.5c-1 3.9-0.4 9.7-1.1 14.6-0.8 5.5-2.3 10.9-3.4 16.4-1.2 6-2.7 11.9-3.7 17.9-1.1 6.4-2.4 12.8-2.6 19.3-0.1 1.9-0.3 7.3 0.3 5.6 1.5-5 1.7-7.7 2.6-11.6 1.3-5.6 2.9-11.1 4.3-16.6 1.3-5.2 2.6-10.3 3.5-15.5 0.5-2.8 0.9-5.6 1.2-8.3 0.4-3.7 0.9-7.3 1.1-11 0.2-3.7-0.2-7.1-0.1-11.3 0.1-3.8-1.5-1.6-2 0.5z" >
       <animate id="an_mustache_2" attributeName="stroke-dasharray" dur="3s" begin="svg1.click+1s" 
        values="0 157;157 0" fill="freeze" restart="whenNotActive" />
  </path>      
  <path id="mustache_3" stroke-dasharray="0 159" class="s0" d="m608.2 408.4c-0.2 4.1 0.6 6.9 1.3 10.3 0.5 2.4 1.4 4.7 2 7 1.3 5.6 1.8 11.4 3.2 16.9 1.5 6.2 3.7 12.2 5.6 18.3 2.4 7.7 4.1 15.7 7.4 22.9 0.2 0.4 1.3 0.3 1.3-0.1-0.3-5.6-1.2-6.9-1.9-10.3-1.2-6.1-2.3-12.3-3.7-18.4-0.9-4-2-7.9-3.2-11.8-0.9-2.9-2-5.6-2.9-8.5-1-3.1-2.1-6.2-3-9.4-1.6-5.4-2.3-9.6-4.5-16.2-0.2-0.6-1.6-1.4-1.6-0.8z">
      <animate id="an_mustache_3" attributeName="stroke-dasharray" dur="2s" begin="svg1.click+2s" 
        values="0 159;159 0" fill="freeze" restart="whenNotActive" />
  </path>    
      
</svg>

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

Окончательный вывод

Наличие или отсутствие следов прошедших анимаций при повторном запуске и fill="freeze", зависит исключительно от времени запуска анимаций:

  1. Нет следов при одновременном запуске, несмотря на разную продолжительность анимаций
  2. Остатки прошедших анимаций появляются, - при разном времени запуска анимаций

В некоторых случаях можно воспользоваться параметром restart="never", который позволит отработать всем анимациям, но запретит повторный запуск. Естественно никаких следов не будет, так как нужно будет перегрузить документ, что приведет к очистке.

<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="500" viewBox="0 0 800 500" preserveAspectRatio="xMinYMin meet">
<style>
.s0{
    fill:none;
    stroke:black;
    stroke-width:5;
}
#mustache_1,#mustache_2,#mustache_3 {
stroke-width:3;
}

</style>
 <rect width="100%" height="100%" fill="#D6DFE6" />
  <path id="body" class="s0" stroke-dasharray="0 2482" d="m228.8 142c0 0-1 9.2 1.5 12.7 6.9 9.7 20.4 13.6 32.2 15.7 13.1 2.3 27.1 0.1 39.7-4.1 13.2-4.4 24.9-12.8 36-21.3 5.6-4.3 10.6-9.5 15-15 4.6-5.8 9.8-11.6 12-18.7 2.2-7 3.3-14.4 0.7-22.1C360.6 72.7 351.5 65 340.9 56.1 326.1 43.9 308.2 34.5 289.5 30.3c-19.5-4.4-40.4-2.6-59.9 1.5-20.1 4.2-39.6 12.3-56.9 23.2-24.2 15.3-46.2 35-63.7 57.7-18.9 24.5-34 52.7-42.7 82.4-7.7 26.3-10.4 54.7-7.5 82 4.4 41.8 18.8 62.2 37.5 88.1 11.1 15.3 27 26.8 42.7 37.5 13.2 9 27.5 16.8 42.7 21.7 13.5 4.4 27.8 5.4 41.9 6.7 27 2.5 81.3 2.2 81.3 2.2l74.9-0.7c0 0 33.9-0.2 49.4-1 9.3-0.5 13-14.3 15.7-23.2 2.8-9.1 2.3-19.3 0-28.5-2.7-11-8.6-21.2-15.7-30-6.3-7.8-14.8-13.8-23.2-19.3-12.1-7.8-25.1-14.7-39-18.9-12.5-3.8-25.9-5.4-39-5.2-17.9 0.2-35.9 3.4-53.2 8.2-4.7 1.3-13.4 5.5-13.4 5.5 0 0 13.4-17.7 21.2-25.6 9.3-9.4 19.6-18 30.4-25.7 13-9.1 26.8-17.3 41.2-23.9 13.8-6.3 27.9-12.8 42.9-15 18.2-2.7 37.5-2.3 55.2 2.6 14.2 3.9 27.1 12.3 39 21 10.4 7.6 18.8 17.6 27.7 27 7.9 8.3 13.3 24.3 10.5 36.7-2.1 9.1-10.1 17.4-18.7 21-9 3.8-21.6 4.6-29.2-1.5-8.2-6.7-9.4-20.2-8.2-30.7 1.4-12.3 8.8-23.9 17.2-33 8.4-9 19.4-16.7 31.5-19.5 11.7-2.7 25.2-1.6 36 3.7 8.9 4.4 15.6 13 20.2 21.7 4.6 8.6 6.8 19.4 6.7 28.5 0 9.5-16.5 23.2-16.5 23.2 0 0 19.8 2.8 29.2 6 9.7 3.3 19.2 7.6 27.5 13.5 9.6 6.9 17.6 15.9 24.9 25.2 4.7 5.9 11.9 19 11.9 19l9 18c0 0 0.7 15.9 6.7 18.7 3.9 1.8 11.1-0.3 12-4.5 0.4-1.7-2.1-3-3.7-3.7-2.3-1.1-5.1-1.6-7.5-0.7-3.3 1.2-7.5 7.5-7.5 7.5h-26.2l-43.9 0.9c0 0-14.8-0.4-22.2-0.4-13.2-0.1-26.6-0.3-39.7 0.2-16.9 0.6-34.3-0.6-53.8 0.1-15.7 0.5-51.6 0.5-51.6 0.5" >
      <animate id="an_body" attributeName="stroke-dasharray" dur="1.5s" begin="svg1.click" values="0 2482;2482 0" fill="freeze" restart="never" />
  
  </path>
   <path id="eye" class="s0" stroke-dasharray="0 43" d="m570.4 371.6c0 0 5.3-5.3 8.5-7.2 2.9-1.7 6.1-3.4 9.5-3.7 3.6-0.3 7.5 0.5 10.7 2.3 3.1 1.7 7.4 7.5 7.4 7.5" > 
       <set attributeName="restart" to="never" calcMode="discrete" begin="an_body.begin" /> 
       <animate id="an_eye" attributeName="stroke-dasharray" dur="0.8s" begin="svg1.click+1s"
         values="0 43;43 0" fill="freeze" restart="never" /> 
</path>    
  
 <path id="mustache_1" class="s0" stroke-dasharray="0 110" d="m542.9 462c2.5-8 7-15.1 10.7-22.5 2.5-4.9 5.2-9.7 7.7-14.7 1.2-2.5 2.2-5.1 3.6-7.5 0.6-1.1 1.1-2.1 2-3.2 0.2-0.3 0.5 0.6 0.4 0.9-1 4.9-2.3 8.2-3.8 12.2-1.3 3.4-3.1 6.6-4.8 9.8-1.2 2.3-2.4 4.6-3.6 6.9-1.1 2-2.2 4.1-3.3 6.1-2.2 4-4.6 9-6.8 11.8-1.9 2.4-2.3 0.9-2.1 0.3z" >
      <animate id="an_mustache_1" attributeName="stroke-dasharray" dur="1s" begin="an_eye.end" 
        values="0 110;110 0" fill="freeze" restart="never" />
  </path>      
  <path id="mustache_2" class="s0" stroke-dasharray="0 157" d="m589.1 412.5c-1 3.9-0.4 9.7-1.1 14.6-0.8 5.5-2.3 10.9-3.4 16.4-1.2 6-2.7 11.9-3.7 17.9-1.1 6.4-2.4 12.8-2.6 19.3-0.1 1.9-0.3 7.3 0.3 5.6 1.5-5 1.7-7.7 2.6-11.6 1.3-5.6 2.9-11.1 4.3-16.6 1.3-5.2 2.6-10.3 3.5-15.5 0.5-2.8 0.9-5.6 1.2-8.3 0.4-3.7 0.9-7.3 1.1-11 0.2-3.7-0.2-7.1-0.1-11.3 0.1-3.8-1.5-1.6-2 0.5z" >
       <animate id="an_mustache_2" attributeName="stroke-dasharray" dur="1s" begin="an_eye.end" 
        values="0 157;157 0" fill="freeze" restart="never" />
  </path>      
  <path id="mustache_3" stroke-dasharray="0 159" class="s0" d="m608.2 408.4c-0.2 4.1 0.6 6.9 1.3 10.3 0.5 2.4 1.4 4.7 2 7 1.3 5.6 1.8 11.4 3.2 16.9 1.5 6.2 3.7 12.2 5.6 18.3 2.4 7.7 4.1 15.7 7.4 22.9 0.2 0.4 1.3 0.3 1.3-0.1-0.3-5.6-1.2-6.9-1.9-10.3-1.2-6.1-2.3-12.3-3.7-18.4-0.9-4-2-7.9-3.2-11.8-0.9-2.9-2-5.6-2.9-8.5-1-3.1-2.1-6.2-3-9.4-1.6-5.4-2.3-9.6-4.5-16.2-0.2-0.6-1.6-1.4-1.6-0.8z">
      <animate id="an_mustache_3" attributeName="stroke-dasharray" dur="1s" begin="an_eye.end" 
        values="0 159;159 0" fill="freeze" restart="never" />
  </path>    
      
</svg>

Answered by Alexandr_TT on January 2, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP