Приведение анимаций CSS
и SVG
Этот ответ на вопрос, создаю специально для тех, кто владеет приемами анимации CSS, но пока не решается освоить анимацию SVG для расширения своих возможностей.
Всё познается в сравнении.
Взят пример анимации CSS из первого ответа и я преобразую его в анимацию SMIL
SVG
В основе эффекта рисования линии в обоих видах анимации (css и svg) лежит один и тот же прием - использование атрибута stroke-dashoffset
- отступ от начала линии.
Когда максимальный отступ равен длине линии, то она полностью скрыта.
Уменьшая stroke-dashoffset
от максимального значения, в нашем случае - 136px
до нуля, мы тем самым реализуем эффект рисования, появления линии.
SVG очень гибко и мощно работает со стилями,- делая анимацию SMIL
, вы можете, как привыкли, внести stroke-dasharray
,stroke-dashoffset
в таблицу стилей или разместить стили прямо непосредственно в команде SVG.
<polyline id="myLine" points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5"
style="fill:none; stroke-width:4; stroke: #000; stroke-dasharray:136; stroke-dashoffset:136;"/>
Остается понять, как преобразовать анимацию CSS
, в smil
Для CSS команда уменьшения stroke-dashoffset
от 136px до нуля выглядит следующим образом:
#myLine{
stroke-dasharray:136;
stroke-dashoffset:136;
animation:dash 5s ease-in forwards;
}
@keyframes dash {
0% {
stroke-dashoffset:136;
}
100% {
stroke-dashoffset:0;
}
}
Для SVG smil
аналогичная команда записывается так:
<animate attributeName="stroke-dashoffset" from="136" to="0" dur="5s" fill="freeze" />
вот, когда эти два способа (css, svg) рядом, то в принципе и так всё понятно.
Добавлю лишь, что параметрforwards
css делает тоже самое, что fill="freeze"
svg - изображение по окончанию анимации замораживается на экране.
Ниже полный пример анимации smil svg
<svg id="svg_logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 60 200 200">
<polyline id="shadow" points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5" style="fill:none; stroke-width:4; stroke: #EAEAEA; opacity:0.5;" />
<polyline id="myLine" points="102.3,73.3 129.7,72.6 119.4,80.9 132.3,129 109.1,111.9 95.5,121.5" style="fill:none; stroke-width:4; stroke: #000; stroke-dasharray:136; stroke-dashoffset:136;" >
<animate
attributeName="stroke-dashoffset"
from="136"
to="0"
dur="5s"
fill="freeze" />
</polyline>
</svg>