How to animate svg height with CSS upward?

I am working with a svg element and I want to animate the height increasing upwards of these elements. But they are growing downward probably due to svg coordinate system. How can I make it go upwards?

window.onload = function () {
    var x1 = document.querySelector('svg').viewBox.baseVal.height;
    var a = document.getElementById('wrapper1');
    var bgArray = [];
    for (var i = 1; i < a.children.length; i++) {
        bgArray.push((a.children[i].getBBox().height / x1) * 100);
    };
    bgArray.forEach((x, i) => a.children[i + 1].style.setProperty("--h1", x + '%'));
    bgArray.forEach((x, i) => a.children[i + 1].style.setProperty("--del", (i + 1) + 's')); //for staggered
}
.r1,
.r2 {    
    visibility: hidden;
    animation: moveHeight 2s ease-in var(--del) 1 forwards;
}

@keyframes moveHeight {
    0% {
        visibility: visible;
        height: 0%;
    }
    100% {
        visibility: visible;
        height: var(--h1);
    }
}
<!DOCTYPE html>
<html>

<body>

    <link rel="stylesheet" href="style.css">
    </link>

    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">

      <g class="wrapper1" id="wrapper1" >
    <rect x="10" y="20" width="120" height="120" stroke="black" fill="none"></rect>   
   <rect class="r1" id="r1" x="10" y="80" width="20" height="60" stroke="none" fill="orange"></rect>
    <rect class="r2" id="r2" x="31" y="100" width="20" height="40" stroke="none" fill="green"></rect>
  <!----> 
  </g>
  
  
  </svg>
    <script src="index.js"></script>
</body>

</html>