пауза при svg анимации

Question

Друзья, всем привет!

Нужна ваша помощь. Никак не могу разобраться с анимацией. Квадрат двигается по траектории, которая образует треугольник. Нужно сделать так, чтобы в двух нижних точках квадрат задерживался на 3 секунды. Т.е. квадрат прочерчивает одну грань, задерживается в конечной точке на 3 секунды, затем прочерчивает еще одну грань, с остановкой в конечной точке на 3 секунды, затем квадрат прочерчивает третью грань треугольника (возвращается в пераоначальную точку старта).

Вот мой код. Паузы не могу сделать.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg version = "1.1" baseProfile="full"

xmlns = "http://www.w3.org/2000/svg"
xmlns:xlink = "http://www.w3.org/1999/xlink"

height = "600px"  width = "800px">
     <g>
           
          <animateTransform id="Down" begin="0s" dur="2s" attributeName="transform" type="translate" from="0,0" to="100,150"/>
              
          <animateTransform id="Left" begin="Down.end" dur="2s" attributeName="transform" type="translate" from="100,150" to="-100,150"/>
          
          <animateTransform id="Up" begin="Left.end" dur="2s" attributeName="transform" type="translate" from="-100,150" to="0,0"/>

         <rect id = "romb" x="200" y="100" fill="green" width="20" height="20"/>
     </g>        
</svg>

Answer 1

В begin добавьте Условие для паузы: begin="Down.end +2s"

<animateTransform id="Left" begin="Down.end +2s" dur="2s" attributeName="transform" 
 type="translate" from="100,150" to="-100,150" fill="freeze"/>

update
Цитата из комментария автора вопроса

Делал также с +2s, но у меня почему-то квадрат на эти 2 секунды возвращался в начальную позицию. А приведённый код работает как нужно.

Это происходит из-за то, что анимационная картинка по окончании анимации возвращается к первому кадру анимации.
Чтобы "заморозить" последний кадр анимации и перейти с этого же места расположения к другой анимации перемещения необходимо добавить: fill="freeze"

<svg version = "1.1" baseProfile="full"

xmlns = "http://www.w3.org/2000/svg"
xmlns:xlink = "http://www.w3.org/1999/xlink"

height = "600px"  width = "800px" >
     <g>
           
          <animateTransform id="Down" begin="0s" dur="2s" attributeName="transform" type="translate" from="0,0" to="100,150" fill="freeze"/>
              
          <animateTransform id="Left" begin="Down.end +2s" dur="2s" attributeName="transform" type="translate" from="100,150" to="-100,150" fill="freeze"/>
          
          <animateTransform id="Up" begin="Left.end +2s" dur="2s" attributeName="transform" type="translate" from="-100,150" to="0,0" fill="freeze" />

         <rect id = "romb" x="200" y="100" fill="green" width="20" height="20"/>
     </g>        
</svg>

Если нужно зациклить анимацию, то для первой анимации id="Down" условие запуска будет begin="0s;Up.end+2s"

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg version = "1.1" baseProfile="full"

xmlns = "http://www.w3.org/2000/svg"
xmlns:xlink = "http://www.w3.org/1999/xlink"

height = "600px"  width = "800px" >
     <g>
           
          <animateTransform id="Down" begin="0s;Up.end+2s" dur="2s" attributeName="transform" type="translate" from="0,0" to="100,150" fill="freeze"/>
              
          <animateTransform id="Left" begin="Down.end +2s" dur="2s" attributeName="transform" type="translate" from="100,150" to="-100,150" fill="freeze"/>
          
          <animateTransform id="Up" begin="Left.end +2s" dur="2s" attributeName="transform" type="translate" from="-100,150" to="0,0" fill="freeze" />

         <rect id = "romb" x="200" y="100" fill="green" width="20" height="20"/>
     </g>        
</svg>

Время анимации и пазы между ними установите по своему вкусу

UPDATE

При желании можно добавить вращение прямоугольнику.

Для этого добавляется ещё одна анимация:

 <rect id = "romb" x="200" y="100" fill="green" width="20" height="20">
    <animateTransform id="an_rotate" begin="0s" dur="0.8s" 
      attributeName="transform" type="rotate" from="0" to="360" 
       repeatCount="indefinite" />
 </rect>

#romb {
transform-origin:center;
transform-box:fill-box;
}

<svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
   height = "600px"  width = "800px" >
     <g>
        <animateTransform id="Down" begin="0s;Up.end+2s" dur="2s" attributeName="transform" type="translate" from="0,0" to="100,150" fill="freeze"/>
          <animateTransform id="Left" begin="Down.end +2s" dur="2s" attributeName="transform" type="translate" from="100,150" to="-100,150" fill="freeze"/>
          <animateTransform id="Up" begin="Left.end +2s" dur="2s" attributeName="transform" type="translate" from="-100,150" to="0,0" fill="freeze" />

         <rect id = "romb" x="200" y="100" fill="green" width="20" height="20">
             <animateTransform id="an_rotate" begin="0s" dur="0.8s" attributeName="transform" type="rotate" from="0" to="360" repeatCount="indefinite" />
         </rect>
     </g>        
</svg>

БЛОГ НА HUSL

пауза при svg анимации

Ответы (1 шт):

UPDATE