Smil Animation VS CSS animation
Этот ответ дан, чтобы не сваливать всё в одну кучу и иметь возможность сравнить в учебных целях анимации CSS и SMIL.
Названия классов, id сохранены, чтобы легче было сравнивать реализацию одинаковых моментов.
1#. Вариант анимации stroke-dashoffset
Как и в в ответе с вариантами анимации CSS stroke-dashoffset
(отступ линии) уменьшается от максимального значения до нуля values="78;0"
реализуя тем самым рисование линии от нуля до максимума
<animate id="pathAnim1" attributeName="stroke-dashoffset"
begin="0s" dur="1s" values="78;0" fill="freeze"/>
.container {
width:5vw;
height:5vh;
}
.svg_success_path1 {
fill:none;
stroke:#07B53B;
stroke-width:2;
stroke-linejoin:round;
stroke-linecap:round;
stroke-dashoffset: 78;
stroke-dasharray: 78;
}
.svg_success_path2 {
fill:none;
stroke:#07B53B;
stroke-width:2;
stroke-linejoin:round;
stroke-linecap:round;
stroke-dashoffset: 33;
stroke-dasharray: 33;
}
<div class="container">
<svg class="box_success__img" viewBox="0 -1 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="svg_success_path1" d="m24 3.9c0 0-1.2-0.8-1.8-1.1C21.3 2.4 20.4 1.9 19.5 1.6 18.5 1.3 17.5 1.1 16.4 1.1 15.4 1 14.3 1.1 13.2 1.3 12.4 1.5 11.7 1.7 11 1.9 10.4 2.2 9.7 2.4 9.1 2.8 8.4 3.1 7.7 3.6 7.1 4.1 6.4 4.6 5.8 5.1 5.2 5.8 4.7 6.4 4.2 7.1 3.7 7.8 3.3 8.6 2.9 9.4 2.7 10.2c-0.4 1.1-0.6 2.3-0.7 3.5-0.1 1.1 0 2.3 0.2 3.4 0.3 1.2 0.7 2.4 1.2 3.5 0.5 1 1.2 1.9 1.9 2.7 0.7 0.8 1.5 1.5 2.3 2.2 0.9 0.6 1.8 1.1 2.8 1.5 1 0.4 2 0.7 3 0.8 1.1 0.2 2.3 0.2 3.5 0.1 1.2-0.1 2.4-0.5 3.5-0.9 1.3-0.5 2.6-1.2 3.7-2 0.9-0.6 1.6-1.5 2.3-2.3 0.7-0.8 1.3-1.8 1.7-2.7 0.5-1.1 0.8-2.3 1-3.5 0.1-1 0.1-2 0-3 0-0.7-0.2-2-0.2-2">
<animate id="pathAnim1" attributeName="stroke-dashoffset" begin="0s" dur="1s" values="78;0" fill="freeze"/>
</path>
<path class="svg_success_path2" d="m7.5 12.5c0 0 5.1 5.3 7.9 7.9C21.4 13.8 29.8 4.1 29.8 4.1">
<animate id="pathAnim2" attributeName="stroke-dashoffset" begin="1s" dur="1s" values="33;0" fill="freeze" />
</path>
</svg>
</div>
2#. Вариант анимации stroke-dasharray
Здесь эффект рисования заключается в изменении длины пробелов и черточек
Сначала длина черты равна нулю, а пробел максимален (78), поэтому линия не видна
stroke-dasharray="0,78"
Затем черта становится максимальной, а пробел равен нулю
stroke-dasharray="78,0"
Итоговая формула анимации:
<animate id="pathAnim1" attributeName="stroke-dasharray"
begin="0s" dur="1s" values="0,78;78,0" fill="freeze"/>
.container {
width:5vw;
height:5vh;
}
.svg_success_path1 {
fill:none;
stroke:#07B53B;
stroke-width:2;
stroke-linejoin:round;
stroke-linecap:round;
stroke-dashoffset: 78;
stroke-dasharray: 78;
}
.svg_success_path2 {
fill:none;
stroke:#07B53B;
stroke-width:2;
stroke-linejoin:round;
stroke-linecap:round;
stroke-dashoffset: 33;
stroke-dasharray: 33;
}
<div class="container">
<svg class="box_success__img" viewBox="0 -1 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="svg_success_path1" d="m24 3.9c0 0-1.2-0.8-1.8-1.1C21.3 2.4 20.4 1.9 19.5 1.6 18.5 1.3 17.5 1.1 16.4 1.1 15.4 1 14.3 1.1 13.2 1.3 12.4 1.5 11.7 1.7 11 1.9 10.4 2.2 9.7 2.4 9.1 2.8 8.4 3.1 7.7 3.6 7.1 4.1 6.4 4.6 5.8 5.1 5.2 5.8 4.7 6.4 4.2 7.1 3.7 7.8 3.3 8.6 2.9 9.4 2.7 10.2c-0.4 1.1-0.6 2.3-0.7 3.5-0.1 1.1 0 2.3 0.2 3.4 0.3 1.2 0.7 2.4 1.2 3.5 0.5 1 1.2 1.9 1.9 2.7 0.7 0.8 1.5 1.5 2.3 2.2 0.9 0.6 1.8 1.1 2.8 1.5 1 0.4 2 0.7 3 0.8 1.1 0.2 2.3 0.2 3.5 0.1 1.2-0.1 2.4-0.5 3.5-0.9 1.3-0.5 2.6-1.2 3.7-2 0.9-0.6 1.6-1.5 2.3-2.3 0.7-0.8 1.3-1.8 1.7-2.7 0.5-1.1 0.8-2.3 1-3.5 0.1-1 0.1-2 0-3 0-0.7-0.2-2-0.2-2">
<animate id="pathAnim1" attributeName="stroke-dasharray" begin="0s" dur="1s" values="0,78;78,0" fill="freeze"/>
</path>
<path class="svg_success_path2" d="m7.5 12.5c0 0 5.1 5.3 7.9 7.9C21.4 13.8 29.8 4.1 29.8 4.1">
<animate id="pathAnim2" attributeName="stroke-dasharray" begin="1s" dur="1s" values="0,33;33,0" fill="freeze" />
</path>
</svg>
</div>
3#. Вариант анимации stroke-dasharray из средней точки
Эта техника основана на свойстве stroke-dasharray в наличии нескольких пар атрибутов черточек и пробелов.
Если нужно рисовать симметрично двумя линиями из одной точки, то используются две пары
атрибутов.
stroke-dasharray: 0,39 0,39; Сумма черточек равна нулю, пробелов равна 78. Поэтому линия будет не видна.
<animate id="pathAnim1" attributeName="stroke-dasharray" begin="1s" dur="1s"
values="0,39 0,39;0,0 78,0" fill="freeze"/>
Note
В сумме все длины пробелов и черточек при любой комбинации, должны
быть равны максимальной длине линии, которая вычисляется методом JS
getTotalLength()
.container {
width:5vw;
height:5vh;
}
.svg_success_path1 {
fill:none;
stroke:cyan;
stroke-width:2;
stroke-linejoin:round;
stroke-dashoffset: 78;
stroke-dasharray: 78;
}
.svg_success_path2 {
fill:none;
stroke:cyan;
stroke-width:2;
stroke-linejoin:round;
stroke-linecap:round;
stroke-dashoffset: 33;
stroke-dasharray: 33;
}
<div class="container">
<svg class="box_success__img" viewBox="0 -1 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"
style="background:#111">
<path class="svg_success_path1" d="m24 3.9c0 0-1.2-0.8-1.8-1.1C21.3 2.4 20.4 1.9 19.5 1.6 18.5 1.3 17.5 1.1 16.4 1.1 15.4 1 14.3 1.1 13.2 1.3 12.4 1.5 11.7 1.7 11 1.9 10.4 2.2 9.7 2.4 9.1 2.8 8.4 3.1 7.7 3.6 7.1 4.1 6.4 4.6 5.8 5.1 5.2 5.8 4.7 6.4 4.2 7.1 3.7 7.8 3.3 8.6 2.9 9.4 2.7 10.2c-0.4 1.1-0.6 2.3-0.7 3.5-0.1 1.1 0 2.3 0.2 3.4 0.3 1.2 0.7 2.4 1.2 3.5 0.5 1 1.2 1.9 1.9 2.7 0.7 0.8 1.5 1.5 2.3 2.2 0.9 0.6 1.8 1.1 2.8 1.5 1 0.4 2 0.7 3 0.8 1.1 0.2 2.3 0.2 3.5 0.1 1.2-0.1 2.4-0.5 3.5-0.9 1.3-0.5 2.6-1.2 3.7-2 0.9-0.6 1.6-1.5 2.3-2.3 0.7-0.8 1.3-1.8 1.7-2.7 0.5-1.1 0.8-2.3 1-3.5 0.1-1 0.1-2 0-3 0-0.7-0.2-2-0.2-2">
<animate id="pathAnim1" attributeName="stroke-dasharray" begin="1s" dur="1s"
values="0,39 0,39;0,0 78,0" fill="freeze"/>
</path>
<path class="svg_success_path2" d="m7.5 12.5c0 0 5.1 5.3 7.9 7.9C21.4 13.8 29.8 4.1 29.8 4.1">
<animate id="pathAnim2" attributeName="stroke-dasharray" begin="0s" dur="1s"
values="0,33; 33,0" fill="freeze" />
</path>
</svg>
</div>
4#. Вариант анимации из средней точки, которая сдвинута stroke-dashoffset
Начало анимации из средней точки можно сдвинуть в любую сторону. Это зависит только ль значения параметра stroke-dashoffset
При длине 78pxлинии,
stroke-dashoffset="39" сдвигает начало анимации на половину линии.
.container {
width:5vw;
height:5vh;
}
.svg_success_path1 {
fill:none;
stroke:cyan;
stroke-width:2;
stroke-linejoin:round;
stroke-dashoffset: 39;
stroke-dasharray: 0,39 0,39;
}
.svg_success_path2 {
fill:none;
stroke:cyan;
stroke-width:2;
stroke-linejoin:round;
stroke-linecap:round;
stroke-dashoffset: 33;
stroke-dasharray: 33;
}
<div class="container">
<svg class="box_success__img" viewBox="0 -1 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"
style="background-color:#111111;">
<path class="svg_success_path1" d="m24 3.9c0 0-1.2-0.8-1.8-1.1C21.3 2.4 20.4 1.9 19.5 1.6 18.5 1.3 17.5 1.1 16.4 1.1 15.4 1 14.3 1.1 13.2 1.3 12.4 1.5 11.7 1.7 11 1.9 10.4 2.2 9.7 2.4 9.1 2.8 8.4 3.1 7.7 3.6 7.1 4.1 6.4 4.6 5.8 5.1 5.2 5.8 4.7 6.4 4.2 7.1 3.7 7.8 3.3 8.6 2.9 9.4 2.7 10.2c-0.4 1.1-0.6 2.3-0.7 3.5-0.1 1.1 0 2.3 0.2 3.4 0.3 1.2 0.7 2.4 1.2 3.5 0.5 1 1.2 1.9 1.9 2.7 0.7 0.8 1.5 1.5 2.3 2.2 0.9 0.6 1.8 1.1 2.8 1.5 1 0.4 2 0.7 3 0.8 1.1 0.2 2.3 0.2 3.5 0.1 1.2-0.1 2.4-0.5 3.5-0.9 1.3-0.5 2.6-1.2 3.7-2 0.9-0.6 1.6-1.5 2.3-2.3 0.7-0.8 1.3-1.8 1.7-2.7 0.5-1.1 0.8-2.3 1-3.5 0.1-1 0.1-2 0-3 0-0.7-0.2-2-0.2-2">
<animate id="pathAnim1" attributeName="stroke-dasharray" begin="1s" dur="1s"
values="0,39 0,39;0,0 78,0" fill="freeze"/>
</path>
<path class="svg_success_path2" d="m7.5 12.5c0 0 5.1 5.3 7.9 7.9C21.4 13.8 29.8 4.1 29.8 4.1">
<animate id="pathAnim2" attributeName="stroke-dasharray" begin="0s" dur="1s"
values="0,33; 33,0" fill="freeze" />
</path>
</svg>
</div>