SVG animation 在 CSS

Question

我正在尝试使用以下 svg 在 CSS 中创建一个 animation。因此，我试图在屏幕字上加载蓝色条，然后显示第二个 svg 'size-view'

我试着玩 dash offset stroke dash array 但没有运气，似乎没有任何改变。 对我做错了什么有帮助吗？ 下面的代码。

我正在尝试复制此示例： https://jsfiddle.net/5tqrmg0v/1/但使用我的字体和 svg

 var shape = document.querySelector(".fill3"); var shapeLength = shape.getTotalLength(); console.log(shapeLength)

 body { background-color: black; }.fill { animation: reveal1 2s linear; } #cover2 { animation: reveal2 2s linear forwards; animation-delay: 2s } /* @keyframes reveal1 { 0% { stroke-dashoffset: -558; } 100% { stroke-dashoffset: 558; } } @keyframes reveal2 { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -80; } } */.fill3 { stroke-dasharray: 1; stroke-dashoffset: 1000; }

 <svg width="320" height="51" viewBox="0 0 320 51" fill="none" xmlns="http://www.w3.org/2000/svg"> <path class="fill2" d="M0.32 43H6.224V29.32H23.168V23.944H6.224V14.776H25.328V9.4H0.32V43ZM39.884 43.528C43.82 43.528 46.172 41.464 47.804 39.064V43H53.612V17.656H47.804V31.96C47.804 35.896 45.452 38.248 42.092 38.248C38.636 38.248 36.668 35.992 36.668 32.056V17.656H30.86V33.784C30.86 39.688 34.172 43.528 39.884 43.528ZM61.2496 43H67.0576V7.96H61.2496V43ZM74.984 43H80.792V7.96H74.984V43ZM115.205 43.48C122.261 43.48 127.205 39.736 127.205 33.448V33.352C127.205 27.784 123.509 25.24 116.405 23.512C109.973 21.976 108.437 20.824 108.437 18.232V18.136C108.437 15.928 110.453 14.152 113.909 14.152C116.981 14.152 120.005 15.352 123.029 17.608L126.197 13.144C122.789 10.408 118.901 8.92 114.005 8.92C107.333 8.92 102.533 12.904 102.533 18.664V18.76C102.533 24.952 106.565 27.064 113.717 28.792C119.957 30.232 121.301 31.528 121.301 33.928V34.024C121.301 36.568 118.997 38.248 115.349 38.248C111.173 38.248 107.957 36.664 104.741 33.88L101.189 38.104C105.221 41.704 110.069 43.48 115.205 43.48ZM145.188 43.576C150.132 43.576 153.06 41.608 155.556 38.824L152.052 35.368C150.228 37.24 148.212 38.536 145.476 38.536C141.012 38.536 137.892 34.888 137.892 30.376V30.28C137.892 25.864 140.964 22.216 145.188 22.216C148.116 22.216 149.988 23.512 151.764 25.384L155.364 21.496C153.012 18.904 150.036 17.128 145.236 17.128C137.652 17.128 132.084 23.176 132.084 30.376V30.472C132.084 37.672 137.652 43.576 145.188 43.576ZM160.898 43H166.706V33.352C166.706 26.632 170.258 23.32 175.346 23.32H175.682V17.176C171.218 16.984 168.29 19.576 166.706 23.368V17.656H160.898V43ZM191.498 43.576C196.154 43.576 199.466 41.704 201.866 38.824L198.458 35.8C196.442 37.768 194.426 38.824 191.594 38.824C187.85 38.824 184.922 36.52 184.298 32.392H202.922C202.97 31.816 203.018 31.288 203.018 30.76C203.018 23.464 198.938 17.128 190.874 17.128C183.626 17.128 178.49 23.08 178.49 30.328V30.424C178.49 38.248 184.154 43.576 191.498 43.576ZM184.25 28.552C184.778 24.616 187.274 21.88 190.826 21.88C194.666 21.88 196.874 24.808 197.258 28.552H184.25ZM220.467 43.576C225.123 43.576 228.435 41.704 230.835 38.824L227.427 35.8C225.411 37.768 223.395 38.824 220.563 38.824C216.819 38.824 213.891 36.52 213.267 32.392H231.891C231.939 31.816 231.987 31.288 231.987 30.76C231.987 23.464 227.907 17.128 219.843 17.128C212.595 17.128 207.459 23.08 207.459 30.328V30.424C207.459 38.248 213.123 43.576 220.467 43.576ZM213.219 28.552C213.747 24.616 216.243 21.88 219.795 21.88C223.635 21.88 225.843 24.808 226.227 28.552H213.219ZM237.82 43H243.628V28.696C243.628 24.76 245.98 22.408 249.34 22.408C252.796 22.408 254.764 24.664 254.764 28.6V43H260.572V26.872C260.572 20.968 257.26 17.128 251.548 17.128C247.612 17.128 245.26 19.192 243.628 21.592V17.656H237.82V43Z" fill="#48868B" /> <path class="fill" d="M92 0H320V51H92V0Z" fill="#48868B"/> </svg> <svg width="256" height="46" viewBox="0 0 256 46" fill="none" xmlns="http://www.w3.org/2000/svg"> <path class="fill3" d="M0.8 45.144H5.84L27.536 0.695998H22.496L0.8 45.144ZM41.6581 39.48C48.7141 39.48 53.6581 35.736 53.6581 29.448V29.352C53.6581 23.784 49.9621 21.24 42.8581 19.512C36.4261 17.976 34.8901 16.824 34.8901 14.232V14.136C34.8901 11.928 36.9061 10.152 40.3621 10.152C43.4341 10.152 46.4581 11.352 49.4821 13.608L52.6501 9.144C49.2421 6.408 45.3541 4.92 40.4581 4.92C33.7861 4.92 28.9861 8.904 28.9861 14.664V14.76C28.9861 20.952 33.0181 23.064 40.1701 24.792C46.4101 26.232 47.7541 27.528 47.7541 29.928V30.024C47.7541 32.568 45.4501 34.248 41.8021 34.248C37.6261 34.248 34.4101 32.664 31.1941 29.88L27.6421 34.104C31.6741 37.704 36.5221 39.48 41.6581 39.48ZM60.0253 9.768H66.2653V4.248H60.0253V9.768ZM60.2653 39H66.0733V13.656H60.2653V39ZM72.5116 39H94.5436V34.248H79.9036L94.5436 17.64V13.656H73.0396V18.408H87.1516L72.5116 35.016V39ZM111.436 39.576C116.092 39.576 119.404 37.704 121.804 34.824L118.396 31.8C116.38 33.768 114.364 34.824 111.532 34.824C107.788 34.824 104.86 32.52 104.236 28.392H122.86C122.908 27.816 122.956 27.288 122.956 26.76C122.956 19.464 118.876 13.128 110.812 13.128C103.564 13.128 98.4279 19.08 98.4279 26.328V26.424C98.4279 34.248 104.092 39.576 111.436 39.576ZM104.188 24.552C104.716 20.616 107.212 17.88 110.764 17.88C114.604 17.88 116.812 20.808 117.196 24.552H104.188ZM154.939 39.24H160.123L174.091 5.4H167.707L157.627 31.224L147.499 5.4H140.971L154.939 39.24ZM178.338 9.768H184.578V4.248H178.338V9.768ZM178.578 39H184.386V13.656H178.578V39ZM203.592 39.576C208.248 39.576 211.56 37.704 213.96 34.824L210.552 31.8C208.536 33.768 206.52 34.824 203.688 34.824C199.944 34.824 197.016 32.52 196.392 28.392H215.016C215.064 27.816 215.112 27.288 215.112 26.76C215.112 19.464 211.032 13.128 202.968 13.128C195.72 13.128 190.584 19.08 190.584 26.328V26.424C190.584 34.248 196.248 39.576 203.592 39.576ZM196.344 24.552C196.872 20.616 199.368 17.88 202.92 17.88C206.76 17.88 208.968 20.808 209.352 24.552H196.344ZM225.822 39.192H231.006L236.718 21.864L242.382 39.192H247.566L255.87 13.656H250.062L244.878 31.032L239.214 13.56H234.27L228.654 31.032L223.566 13.656H217.614L225.822 39.192Z" fill="#48868B"/> </svg>

Answer 1

如本文所述，animation 使用path 、 stroke-dasharray和动画化stroke-dashoffset只是可能的选项之一（我个人喜欢这种方法）

正如此处评论中所建议的，使用stroke-dasharray和stroke-dashoffset需要一些stroke 。 如果您想使用此技术，请将您的“覆盖”路径（例如原始示例中带有class="fill"的path ）设置为line ，而不是闭合轮廓形成矩形。 视觉结果是一样的，但背后的语义和形状（以及因此可以或不可以使用它们的方式）却大不相同。

工作代码：

<!doctype html>
<html>
<head>
<style>
  body {
    background-color: black;
  }

  #cover1 {
    animation: reveal1 2s linear forwards;
  }

  #cover2 {
    animation: reveal2 2s linear forwards;
    animation-delay: 2s
  }

  @keyframes reveal1 {
     0% { stroke-dashoffset: 1000; } /* the value for stroke-dasharray */
     100% { stroke-dashoffset: 772; } /* 1000 - 228; 228=320-92 = length of the line */
  }
  @keyframes reveal2 {
     0% { stroke-dashoffset: 0; }
     100% { stroke-dashoffset: -256; } /* 256 = length of the line = length of the second svg */
  }
</style>
</head>
<body>
<svg width="320" height="51" viewBox="0 0 320 51" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path class="fill2" d="M0.32 43H6.224V29.32H23.168V23.944H6.224V14.776H25.328V9.4H0.32V43ZM39.884 43.528C43.82 43.528 46.172 41.464 47.804 39.064V43H53.612V17.656H47.804V31.96C47.804 35.896 45.452 38.248 42.092 38.248C38.636 38.248 36.668 35.992 36.668 32.056V17.656H30.86V33.784C30.86 39.688 34.172 43.528 39.884 43.528ZM61.2496 43H67.0576V7.96H61.2496V43ZM74.984 43H80.792V7.96H74.984V43ZM115.205 43.48C122.261 43.48 127.205 39.736 127.205 33.448V33.352C127.205 27.784 123.509 25.24 116.405 23.512C109.973 21.976 108.437 20.824 108.437 18.232V18.136C108.437 15.928 110.453 14.152 113.909 14.152C116.981 14.152 120.005 15.352 123.029 17.608L126.197 13.144C122.789 10.408 118.901 8.92 114.005 8.92C107.333 8.92 102.533 12.904 102.533 18.664V18.76C102.533 24.952 106.565 27.064 113.717 28.792C119.957 30.232 121.301 31.528 121.301 33.928V34.024C121.301 36.568 118.997 38.248 115.349 38.248C111.173 38.248 107.957 36.664 104.741 33.88L101.189 38.104C105.221 41.704 110.069 43.48 115.205 43.48ZM145.188 43.576C150.132 43.576 153.06 41.608 155.556 38.824L152.052 35.368C150.228 37.24 148.212 38.536 145.476 38.536C141.012 38.536 137.892 34.888 137.892 30.376V30.28C137.892 25.864 140.964 22.216 145.188 22.216C148.116 22.216 149.988 23.512 151.764 25.384L155.364 21.496C153.012 18.904 150.036 17.128 145.236 17.128C137.652 17.128 132.084 23.176 132.084 30.376V30.472C132.084 37.672 137.652 43.576 145.188 43.576ZM160.898 43H166.706V33.352C166.706 26.632 170.258 23.32 175.346 23.32H175.682V17.176C171.218 16.984 168.29 19.576 166.706 23.368V17.656H160.898V43ZM191.498 43.576C196.154 43.576 199.466 41.704 201.866 38.824L198.458 35.8C196.442 37.768 194.426 38.824 191.594 38.824C187.85 38.824 184.922 36.52 184.298 32.392H202.922C202.97 31.816 203.018 31.288 203.018 30.76C203.018 23.464 198.938 17.128 190.874 17.128C183.626 17.128 178.49 23.08 178.49 30.328V30.424C178.49 38.248 184.154 43.576 191.498 43.576ZM184.25 28.552C184.778 24.616 187.274 21.88 190.826 21.88C194.666 21.88 196.874 24.808 197.258 28.552H184.25ZM220.467 43.576C225.123 43.576 228.435 41.704 230.835 38.824L227.427 35.8C225.411 37.768 223.395 38.824 220.563 38.824C216.819 38.824 213.891 36.52 213.267 32.392H231.891C231.939 31.816 231.987 31.288 231.987 30.76C231.987 23.464 227.907 17.128 219.843 17.128C212.595 17.128 207.459 23.08 207.459 30.328V30.424C207.459 38.248 213.123 43.576 220.467 43.576ZM213.219 28.552C213.747 24.616 216.243 21.88 219.795 21.88C223.635 21.88 225.843 24.808 226.227 28.552H213.219ZM237.82 43H243.628V28.696C243.628 24.76 245.98 22.408 249.34 22.408C252.796 22.408 254.764 24.664 254.764 28.6V43H260.572V26.872C260.572 20.968 257.26 17.128 251.548 17.128C247.612 17.128 245.26 19.192 243.628 21.592V17.656H237.82V43Z" fill="#48868B" />
  <path id="cover1" class="cover" d="M92 25.5 H 320" stroke="#48868B" stroke-width="51" stroke-dasharray="1000 1000"/>
</svg>
<svg width="256" height="46" viewBox="0 0 256 46" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M0.8 45.144H5.84L27.536 0.695998H22.496L0.8 45.144ZM41.6581 39.48C48.7141 39.48 53.6581 35.736 53.6581 29.448V29.352C53.6581 23.784 49.9621 21.24 42.8581 19.512C36.4261 17.976 34.8901 16.824 34.8901 14.232V14.136C34.8901 11.928 36.9061 10.152 40.3621 10.152C43.4341 10.152 46.4581 11.352 49.4821 13.608L52.6501 9.144C49.2421 6.408 45.3541 4.92 40.4581 4.92C33.7861 4.92 28.9861 8.904 28.9861 14.664V14.76C28.9861 20.952 33.0181 23.064 40.1701 24.792C46.4101 26.232 47.7541 27.528 47.7541 29.928V30.024C47.7541 32.568 45.4501 34.248 41.8021 34.248C37.6261 34.248 34.4101 32.664 31.1941 29.88L27.6421 34.104C31.6741 37.704 36.5221 39.48 41.6581 39.48ZM60.0253 9.768H66.2653V4.248H60.0253V9.768ZM60.2653 39H66.0733V13.656H60.2653V39ZM72.5116 39H94.5436V34.248H79.9036L94.5436 17.64V13.656H73.0396V18.408H87.1516L72.5116 35.016V39ZM111.436 39.576C116.092 39.576 119.404 37.704 121.804 34.824L118.396 31.8C116.38 33.768 114.364 34.824 111.532 34.824C107.788 34.824 104.86 32.52 104.236 28.392H122.86C122.908 27.816 122.956 27.288 122.956 26.76C122.956 19.464 118.876 13.128 110.812 13.128C103.564 13.128 98.4279 19.08 98.4279 26.328V26.424C98.4279 34.248 104.092 39.576 111.436 39.576ZM104.188 24.552C104.716 20.616 107.212 17.88 110.764 17.88C114.604 17.88 116.812 20.808 117.196 24.552H104.188ZM154.939 39.24H160.123L174.091 5.4H167.707L157.627 31.224L147.499 5.4H140.971L154.939 39.24ZM178.338 9.768H184.578V4.248H178.338V9.768ZM178.578 39H184.386V13.656H178.578V39ZM203.592 39.576C208.248 39.576 211.56 37.704 213.96 34.824L210.552 31.8C208.536 33.768 206.52 34.824 203.688 34.824C199.944 34.824 197.016 32.52 196.392 28.392H215.016C215.064 27.816 215.112 27.288 215.112 26.76C215.112 19.464 211.032 13.128 202.968 13.128C195.72 13.128 190.584 19.08 190.584 26.328V26.424C190.584 34.248 196.248 39.576 203.592 39.576ZM196.344 24.552C196.872 20.616 199.368 17.88 202.92 17.88C206.76 17.88 208.968 20.808 209.352 24.552H196.344ZM225.822 39.192H231.006L236.718 21.864L242.382 39.192H247.566L255.87 13.656H250.062L244.878 31.032L239.214 13.56H234.27L228.654 31.032L223.566 13.656H217.614L225.822 39.192Z" fill="#48868B"/>
  <path id="cover2" class="cover" d="M0 23 H 256" stroke="black" stroke-width="46" stroke-dasharray="1000 1000"/>
</svg>
</body>
</html>