隐藏 SVG 宽度直到动画延迟

Question

我正在尝试使用以下代码为 svg rect 的宽度设置动画。

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 class="r1" id="r1" x="10" y="10" width="200" height="20" stroke="none" fill="orange"></rect>
    <rect class="r2" id="r2" x="10" y="30" width="200" height="20" stroke="none" fill="green"></rect>
  </svg>
</body>

</html>

动画正在播放，但如何隐藏 r1 的 width 直到动画在 2s 开始播放（直到延迟）。

Answer 1

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 class="r1" id="r1" x="10" y="10" width="200" height="20" stroke="none" fill="orange"></rect>
    <rect class="r2" id="r2" x="10" y="30" width="200" height="20" stroke="none" fill="green"></rect>
  </svg>

使用css`visibility`

Edit-2：在动画结束后保持可见性）

Answer 2

简单易行的解决方案将animation-fill-mode: forwards;更改为animation-fill-mode: both;并将宽度更改为px或%

.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 class="r1" id="r1" x="10" y="10" width="200" height="20" stroke="none" fill="orange"></rect>
    <rect class="r2" id="r2" x="10" y="30" width="200" height="20" stroke="none" fill="green"></rect>
  </svg>
</body>

</html>

隐藏 SVG 宽度直到动画延迟

Hide SVG width till the animation-delay

javascript

css

svg

css-animations

使用css`visibility`

隐藏 SVG 宽度直到动画延迟

Hide SVG width till the animation-delay

javascript

css

svg

css-animations

使用cssvisibility

使用css`visibility`