SVG CSS Transition Animation

Lower rectangle animation not working on some browsers

by mamounothman

HTML

<!-- works -->
<svg width="400" height="100">
  <rect id="rect-1" width="400" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

<!-- only works on Chrome -->
<svg width="400" height="100">
  <defs>
    <g id="my-rect">
      <rect id="rect-2" width="400" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
    </g>
  </defs>
  <use xlink:href="#my-rect"></use>
</svg>

CSS

.grow {
  -webkit-transition: 1.5s;
  -moz-transition: 1.5s;
  -o-transition: 1.5s;
  transition: 3s;
  width: 10px;
}

JavaScript

(() => {
	setTimeout(() => {
  	const rect1 = document.getElementById('rect-1');
  	rect1.classList.add('grow');
    
    const rect2 = document.getElementById('rect-2');
  	rect2.classList.add('grow');
  }, 1000);
})();