'Freeze svg animation by click

I have this svg code that produces 3 rectangles that change colors. I want to freeze them by clicking on any of these 3 rectangles, but I'm new to svg and I have no idea how to do it. I tried by using javascript, but it didn't work. Any ideas?

<svg width="500" height="500" onclick="freezing()">
  <rect x="10" y="20" width="90" height="60">
    <animate id="a1" attributeName="fill" from="red" to="blue" dur="3s" fill="freeze"  />
  </rect>
  <rect x="10" y="120" width="90" height="60">
    <animate id="a2" attributeName="fill" from="blue" to="yellow" dur="3s" fill="freeze"  />
  </rect>
  <rect x="10" y="220" width="90" height="60">
    <animate id="a3" attributeName="fill" from="yellow" to="green" dur="3s" fill="freeze" />
  </rect>
</svg>
javascripthtmlsvg


Solution 1:[1]

You can use the SVGSVGElement#pauseAnimations method to pause SMIL animations running inside this element. To resume it you can call the unpauseAnimations() one.

const svg = document.querySelector("svg");
svg.onclick = (evt) => {
  if (svg.animationsPaused()) {
    svg.unpauseAnimations();
  }
  else {
    svg.pauseAnimations();
  }
};
<svg width="500" height="500" >
  <rect x="10" y="20" width="90" height="60">
    <animate id="a1" attributeName="fill" from="red" to="blue" dur="3s" fill="freeze"  />
  </rect>
  <rect x="10" y="120" width="90" height="60">
    <animate id="a2" attributeName="fill" from="blue" to="yellow" dur="3s" fill="freeze"  />
  </rect>
  <rect x="10" y="220" width="90" height="60">
    <animate id="a3" attributeName="fill" from="yellow" to="green" dur="3s" fill="freeze" />
  </rect>
</svg>

Solution 2:[2]

It is really difficult to combine SMIL animations in SVG with JavaScript. Here I replaced the animate elements with Animation objects in JavaScript. An animation object have different methods like play(), pause() and cancel().

By calling Element.getAnimations() you can get all the animations on an element. It is an array, so you need to iterate over it and pause all (in this case only one) the animations.

let timingoptions = {
  duration: 3000,
  fill: 'forwards'
};

document.querySelector('rect:nth-child(1)').animate([
  {fill: 'red'},
  {fill: 'blue'}
], timingoptions);

document.querySelector('rect:nth-child(2)').animate([
  {fill: 'blue'},
  {fill: 'yellow'}
], timingoptions);

document.querySelector('rect:nth-child(3)').animate([
  {fill: 'yellow'},
  {fill: 'green'}
], timingoptions);

document.querySelector('svg').addEventListener('click', e => {
  e.target.getAnimations().forEach(animation => animation.pause());
});
<svg width="500" height="500">
  <rect x="10" y="20" width="90" height="60"/>
  <rect x="10" y="120" width="90" height="60"/>
  <rect x="10" y="220" width="90" height="60"/>
</svg>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 chrwahl

Related Questions