Skip to main content

Pausing the animation of <svg> elements can affect child <svg> elements differently in different browsers

Consider the following SVG, which contains two animated rectangles:

<svg xmlns="" viewBox="0 0 10 10" width="100" id="outer">
  <rect width="0" height="10" fill="black">
    <animate attributeName="width" values="0;10;0" dur="20s"/>

  <svg id="inner">
    <rect width="0" height="5" fill="red">
      <animate attributeName="width" values="0;10;0" dur="7s"/>

Suppose you pause animations in the outer SVG with JavaScript, e.g.:


What happens next depends on the browser.