Как начать SVG анимацию с самого начала

Question

Вот простой пример SVG анимации.

Суть которого состоит в том, что есть две фигуры: круг и квадрат.

При клике по кругу он начинает смещаться вправо. Квадрат начинает двигаться вправо через одну секунду после начала анимации круга. В итоге в конце анимации обе фигуры находятся справа.

При повторном клике по кругу, круг снова оказывается слева и начинает двигаться вправо. Квадрат же остаётся на месте в котором закончилась его анимация (справа). И только через одну секунду он попадает в левую часть и начинает двигаться вправо.

Как сделать так, что бы при повторном клике по кругу обе фигуры оказались слева, ну а потом начали двигаться вправо? То есть, как запустить анимацию с самого начала?

HTML

svg {
  border: 3px solid #eee;
  display: block;
  margin: 1em auto;
}

p {
  color: #aaa;
  text-align: center;
  margin: 2em 0;
}

<svg width="500" height="350">
  <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
  <rect id="blue-rectangle" width="50" height="50" x="25" y="200" fill="#0099cc"></rect>
  
  <animate 
           xlink:href="#orange-circle"
           attributeName="cx"
           from="50"
           to="450" 
           dur="5s"
           begin="click"
           fill="freeze" 
           id="circAnim"/>
  
  <animate 
           xlink:href="#blue-rectangle"
           attributeName="x" 
           from="50"
           to="425" 
           dur="5s"
           begin="circAnim.begin + 1s"
           fill="freeze" 
           id="rectAnim"/>
  
</svg>
<p>Кликните по кругу, чтобы анимировать его, а следом за ним и прямоугольник.</p>

Ссылка на Сodepen

Answer 1

Вопрос:

Как сделать так, что бы при повторном клике по кругу обе фигуры оказались слева, ну а потом начали двигаться вправо? То есть, как запустить анимацию с самого начала?

Удалите fill="freeze" заморозку в конце анимации и оба элемента будут тут же возвращаться на место.
Добавил команду restart="whenNotActive"/>,которая защищает от повторного запуска, пока анимация не дошла до конца.

svg {
  border: 3px solid #eee;
  display: block;
  margin: 1em auto;
}
p {
  color: #aaa;
  text-align: center;
  margin: 2em 0;
}

<svg width="500" height="350">
  <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
  <rect id="blue-rectangle" width="50" height="50" x="25" y="200" fill="#0099cc"></rect>
  
  <animate 
           xlink:href="#orange-circle"
           attributeName="cx"
           from="50"
           to="450" 
           dur="5s"
           begin="click"
           id="circAnim"
           restart="whenNotActive"/>
  
  <animate 
           xlink:href="#blue-rectangle"
           attributeName="x" 
           from="50"
           to="425" 
           dur="4s"
           begin="circAnim.begin + 1s"
           id="rectAnim"
           restart="whenNotActive"/>
  
</svg>
<p>Кликните по кругу, чтобы анимировать его, а следом за ним и прямоугольник.</p>

БЛОГ НА HUSL

Как начать SVG анимацию с самого начала

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