How to animate svg height with CSS upward?-CodePudding

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

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

</html>

CodePudding user response：

You could draw the bars but cover them and then gradually uncover them.

This covers them by adding white bars and shrinking those.

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
}

.shrink {
  animation: moveHeight 2s ease-in var(--del) 1 forwards;
}

@keyframes moveHeight {
  0% {
    height: var(--h1);
  }
  100% {
    height: 0;
  }
}

<!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  id="wrapper1" >
    <rect x="10" y="20" width="120" height="120" stroke="black" fill="none"></rect>   
   <rect  id="r1" x="10" y="80" width="20" height="60" stroke="none" fill="orange"></rect>
   <rect   x="10" y="80" width="20" height="60" stroke="none" fill="white"></rect>
    <rect  id="r2" x="31" y="100" width="20" height="40" stroke="none" fill="green"></rect>
    <rect   x="30" y="99" width="22" height="41" stroke="none" fill="white"></rect>
  <!----> 
  </g>
  
  
  </svg>
  <script src="index.js"></script>
</body>

</html>

Note, at some zoom levels a screen pixel of the underneath bars can be left showing (giving a faint vertical line at the start). To get round that the second white bar has been moved one left and made one wider (and similarly for height). Somewhat hacky so I hope someone can come up with a more straightforward solution.

CodePudding user response：

I have looked into this brilliant

<g transform="translate(0,340) scale(1, -1)"> 260 rectY(80)=340 positions

<g transform="translate(0,425) scale(1, -1)"> 260 rectY(80) (wrapperY 345 -260) positions

and lastly positions at the bottom of the wrapper

<g transform="translate(0,605) scale(1, -1)"> 260 rectY(80) (wrapperY 345 -260) wrapperHeight 180 = 605

Putting everything together with javascript and css

//converting svg coordinates to cartesian coordinates
// transform="translate(0, maxY) scale(1, -1)".
// or transform="scale(1, -1) translate(0, -maxY)".


window.onload = function app() {
    var bgArray1 = []; //to collect only height
    var bgArray2 = []; //to collect height   y    
    var wrapperElement = document.getElementById('wrapper1');
    var wrapperY = wrapperElement.getBBox().y //what is the y coordinate of wrapper rect
    var wrapperHeight = wrapperElement.getBBox().height;

    var getRect = document.querySelectorAll('[class^="r"]');

    for (var i = 0; i < getRect.length; i  ) {
        var _bBox = getRect[i].getBBox(); // getting the bBox for each rect
        var _height = _bBox.height   _bBox.y //getting each rect's height
        var _y = _bBox.y // getting each rect's y coordinate
        var _heightAndY = _height   _y //total of Y height of each rect        
        bgArray1.push(_height);
        bgArray2.push(_heightAndY);


    }
    var _maxHeight = Math.max(...bgArray1); // use this if you want to position the rect at (y=0)
    var _maxTotal = Math.max(...bgArray2); // use this if you want to position the rect at (y=0)
    var _wrapperTop = _maxTotal   (wrapperY - _maxHeight); //use this if you want to postion the rect at the the 
    //top of the wrapper
    var _wrapperBottom = _wrapperTop   wrapperHeight //use this if you wantto position the rects at the 
        //bottom of the wrapper                                                    



    bgArray1.forEach((x, i) => getRect[i].setAttribute("transform", `translate(0,${_wrapperBottom}) scale(1,-1)`));
    bgArray1.forEach((x, i) => getRect[i].style.setProperty("--del", (i   1)   's'))


}

[class^="r"] {
    visibility: hidden;
    animation: moveHeight 2s ease-out var(--del) 1 forwards;
}

@keyframes moveHeight {
    0% {
        visibility: visible;
        height: 0
    }
    100% {
        visibility: visible;
        height: 100;
    }
}

<!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">
    
    <rect  id="wrapper1" x="10" y="345" width="120" height="180" stroke="teal" fill="none"></rect>
    <line  x1="10" y1="80" x2="220" y2="80" style="stroke:rgb(110, 31, 194);stroke-width:1" /> 
    <g>
    <line  x1="10" y1="80" x2="220" y2="80" style="stroke:rgb(87, 202, 91);stroke-width:1"/> 
    <rect  id="r0" x="10" y="80" width="83" height="180" stroke="brown" fill="none"></rect>
    <rect  id="r1" x="10" y="80" width="20" height="60"  stroke="none"  fill="orange"></rect>
    <rect  id="r2" x="31" y="80" width="20" height="10"  stroke="none"  fill="green"></rect>
    <rect  id="r3" x="52" y="80" width="20" height="100" stroke="none"  fill="blue"></rect>
    <rect  id="r4" x="73" y="80" width="20" height="140" stroke="none"  fill="magenta"></rect>
    <line  x1="10" y1="260" x2="220" y2="260" style="stroke:rgb(87, 202, 91);stroke-width:1"/> 
  </g>
  <line  x1="10" y1="260" x2="220" y2="260" style="stroke:rgb(218, 149, 22);stroke-width:1" /> 

  <g  id="wrapper2">
    <rect x="140" y="0" width="50" height="700" stroke="red" fill="none"></rect>

  </g>
  
  </svg>
    <!--<script src="index.js"></script>-->
    <script src="index2.js"></script>
</body>

</html>