SVG / SMIL Последователый вызов двух анимаций

166

22 января 2019, 18:40

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

Приведу пример

#letters { 
  display: block; 
  height: 100%; 
  min-height: 100px; 
  width: 100%; 
  max-width: 840px; 
  border-right: 1px solid #000; 
  cursor: pointer; 
} 
 
.letters_path { 
  fill: #40CAF4; 
  stroke-width: 2px; 
  stroke: #091C52; 
}

<svg id="letters" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 550"> 
   <path id="path_V" class="letters_path" 
                                  stroke-dasharray="578.8" 
                                  d="M236.3,145.9h0.3c16.7,0,29.5,3.3,38.2,10c2.3,1.8,3.5,3.1,3.5,4l-0.2,0.2l-7.9-3.9v0.2c8.9,11,13.4,17.1,13.4,18.2c0,1.6-3.7,7.9-11,18.7c-8.2,15.2-16.3,28.3-24.2,39.2l-26,31.2H222l0.2-6.1c-1.2-9.9-2.2-20.3-3.1-31.4c-0.2-0.1-0.6-16.1-0.6-16.1c-1.2-3.3-1.8-5.4-1.8-6.3c1.2-1.2,2.1-1.8,2.8-1.8c0-1-1.5-2.9-4.6-5.7c0.6-0.8,1.6-8.1,3.2-21.9c0-1.5-3.8-5.5-3.8-5.5c0.6-0.2,1.3-0.3,2.2-0.3c0,0-4.6-5.2-4.9-5.2v-0.2c0-0.4,3.6-1,10.9-1.8l-2.4-2.4v-0.3h0.2c2,0,6.2,2.2,12.4,6.6c1.5,0.8,2.5,1.2,3.1,1.2l-6.1-9.9c0,0,10.3,11.1,10.3,12.7v6.7h-0.2c-0.7-0.4-1.3-0.6-2-0.6h-3v0.2c0,0.4,0.7,1.9,2.1,4.5l0.3,1c-0.3,0.6-0.6,1-0.8,1h-0.2c-0.6,0-1.6-0.6-2.8-1.8v0.3l0.8,4.2c-0.7,2.3-1.5,8.8-2.4,19.5c-0.9,5.2-2.5,18-4.8,38.6c0.7,0,13.7-23.9,16.7-29.3h-1.5v-0.3c1.6-2,3.3-5.6,4.9-10.8c7-16.2,10.7-25,11-26.4c0.7-4.9,1.3-8,1.8-9.3c-2.4-1.1-3.8-2-4.2-2.7l0.2-0.3h0.3l9,0.6c0-1.2-2.4-3.5-7.1-6.7c-2.3-2.3-9.6-6.1-21.9-11.4v-0.4L236.3,145.9L236.3,145.9z"> 
                                <animate attributeName="stroke-dashoffset" values="578.8;0" dur="2s" fill="freeze" begin=letters.click 
                                         calcMode="linear"/> 
                                         </path>                      
  
 </svg>

Идея следующая -> Изначально экран пустой.
По клику в области SVG сначало отрабатывает анимация отрисовки пути для буквы, когда она закончилась происходит закрашивание фона, от opacity:0 до fill: #40CAF4; (Ну или как-то через rgba);

1) Как добиться, чтобы изначально всё было пустым?
2) Как произвести одну анимацию над stroke-dashoffset а затем над fill ?

Answer 1

Для последовательного выполнения нескольких анимаций необходимо каждой анимации присвоить ID
Допустим анимации с прорисовкой контура буквы с помощью stroke-dashoffset присваиваете

<animate id="an1" attributeName="stroke-dashoffset" stroke-dashoffset="578" stroke-dasharray="578" values="578.8;0" dur="2s" fill="freeze" begin=letters.click                                          calcMode="linear"/>

для второй команды анимации - заполнение цветом присваиваете <animate id="an2"

#letters { 
  display: block; 
  height: 100%; 
  min-height: 100px; 
  width: 100%; 
  max-width: 840px; 
  border-right: 1px solid #000; 
  cursor: pointer; 
} 
 
.letters_path { 
  fill: white; 
  stroke-width: 2px; 
  stroke: #091C52; 
}

<svg id="letters" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 550"> 
 <path id="path_V" class="letters_path"  stroke-dasharray="578.8" stroke-dashoffset=578.8 
                                  d="M236.3,145.9h0.3c16.7,0,29.5,3.3,38.2,10c2.3,1.8,3.5,3.1,3.5,4l-0.2,0.2l-7.9-3.9v0.2c8.9,11,13.4,17.1,13.4,18.2c0,1.6-3.7,7.9-11,18.7c-8.2,15.2-16.3,28.3-24.2,39.2l-26,31.2H222l0.2-6.1c-1.2-9.9-2.2-20.3-3.1-31.4c-0.2-0.1-0.6-16.1-0.6-16.1c-1.2-3.3-1.8-5.4-1.8-6.3c1.2-1.2,2.1-1.8,2.8-1.8c0-1-1.5-2.9-4.6-5.7c0.6-0.8,1.6-8.1,3.2-21.9c0-1.5-3.8-5.5-3.8-5.5c0.6-0.2,1.3-0.3,2.2-0.3c0,0-4.6-5.2-4.9-5.2v-0.2c0-0.4,3.6-1,10.9-1.8l-2.4-2.4v-0.3h0.2c2,0,6.2,2.2,12.4,6.6c1.5,0.8,2.5,1.2,3.1,1.2l-6.1-9.9c0,0,10.3,11.1,10.3,12.7v6.7h-0.2c-0.7-0.4-1.3-0.6-2-0.6h-3v0.2c0,0.4,0.7,1.9,2.1,4.5l0.3,1c-0.3,0.6-0.6,1-0.8,1h-0.2c-0.6,0-1.6-0.6-2.8-1.8v0.3l0.8,4.2c-0.7,2.3-1.5,8.8-2.4,19.5c-0.9,5.2-2.5,18-4.8,38.6c0.7,0,13.7-23.9,16.7-29.3h-1.5v-0.3c1.6-2,3.3-5.6,4.9-10.8c7-16.2,10.7-25,11-26.4c0.7-4.9,1.3-8,1.8-9.3c-2.4-1.1-3.8-2-4.2-2.7l0.2-0.3h0.3l9,0.6c0-1.2-2.4-3.5-7.1-6.7c-2.3-2.3-9.6-6.1-21.9-11.4v-0.4L236.3,145.9L236.3,145.9z"> 
<animate id="an1" attributeName="stroke-dashoffset" values="578.8;0" dur="2s" fill="freeze" begin=letters.click />  
<animate id="an2" attributeName="fill" values="white;#40CAF4" dur="1s" fill="freeze" begin="an1.end"                                    /> 
                                         </path>                      
  
 </svg>

Условие начала второй анимации по окончанию первой анимации - begin=an1.end