I am trying to animate the width of a svg rect with the following code.

window.onload = function() {
    var viewBoxWidth = document.querySelector('svg').viewBox.baseVal.width;
    var rect1 = document.getElementById('r1');
    var rect1Width = rect1.getBBox().width;
    var pct = (rect1Width / viewBoxWidth) * 100;
    rect1.style.setProperty('--w1', pct   '%');
}

.r1 {
    animation-name: moveWidth;
    animation-delay: 2s;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

@keyframes moveWidth {
    0% {
        width: 0%;
    }
    100% {
        width: var(--w1);
    }
}

<!DOCTYPE html>
<html>

<body>
    

    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
    <rect  id="r1" x="10" y="10" width="200" height="20" stroke="none" fill="orange"></rect>
    <rect  id="r2" x="10" y="30" width="200" height="20" stroke="none" fill="green"></rect>
  </svg>
</body>

</html>

The animation is taking place but how can I hide the width of r1 till the animation kicks in at the 2s, (till the delay).

CodePudding user response：

Simple and easy solution change animation-fill-mode: forwards; to animation-fill-mode: both; and width into px or %

window.onload = function() {
    var viewBoxWidth = document.querySelector('svg').viewBox.baseVal.width;
    var rect1 = document.getElementById('r1');
    var rect1Width = rect1.getBBox().width;
    var pct = (rect1Width / viewBoxWidth) * 100;
    rect1.style.setProperty('--w1', pct   '%');
}

.r1 {
    animation-name: moveWidth;
    animation-delay: 2s;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-fill-mode: both;
}

@keyframes moveWidth {
    0% {
        width: 0%;
    }
    100% {
        width: 200px;
    }
}

<!DOCTYPE html>
<html>

<body>
    

    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
    <rect  id="r1" x="10" y="10" width="200" height="20" stroke="none" fill="orange"></rect>
    <rect  id="r2" x="10" y="30" width="200" height="20" stroke="none" fill="green"></rect>
  </svg>
</body>

</html>

CodePudding user response：

window.onload = function() {
  var viewBoxWidth = document.querySelector('svg').viewBox.baseVal.width;
  var rect1 = document.getElementById('r1');
  var rect1Width = rect1.getBBox().width;
  var pct = (rect1Width / viewBoxWidth) * 100;
  rect1.style.setProperty('--w1', pct   '%');
}

.r1 {
visibility:hidden;/*hide default*/
  animation-name: moveWidth;
  animation-delay: 2s;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-direction: normal;
  animation-fill-mode: forwards;
  
}

@keyframes moveWidth {
  0% {
    visibility:visible;/*show again*/
    width: 0%;
  }
  100% {
  visibility:visible;/*Edit-2 maintains visibility after animation overs*/
    width: var(--w1);
  }
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
    <rect  id="r1" x="10" y="10" width="200" height="20" stroke="none" fill="orange"></rect>
    <rect  id="r2" x="10" y="30" width="200" height="20" stroke="none" fill="green"></rect>
  </svg>

use css `visibility`

Edit-2: maintains visibility after animation overs)

use css visibility

use css `visibility`