animate SVG line

Question

这是我创建的代码。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<polyline fill="none" stroke="#1D1D1B" stroke-miterlimit="10" points="466.797,219.464 466.797,456.751 39.678,456.751 
    39.678,40.932 466.797,40.932 466.797,219.464" class="animateline"/>

<style>.animateline{stroke-dasharray:400 20;stroke-dashoffset:300;animation:animatelinedraw 10000ms ease-in-out infinite forwards;}@keyframes animatelinedraw{100%{stroke-dashoffset:0;}}@keyframes MOdKuuJM_fade{0%{stroke-opacity:1;}94.44444444444444%{stroke-opacity:1;}100%{stroke-opacity:0;stroke-dashoffset:}}</style>

</svg>

我要实现的是重新划出线条并以动画方式缩小您看到的差距。然后重新打开缝隙，然后将其再次做同样的事情。

现在，差距一直保持开放，并且每次循环看起来都很奇怪，因为它不是连续的"绘画"运动。我对SVG的了解不多，所以即使我在网络上搜索了我的问题，我也找不到答案。

Answer 1

为了缩小差距，您将需要动画stroke-dasharray

@keyframes animatelinedraw{
  50%{stroke-dashoffset:0;stroke-dasharray:400 0;}
}

stroke-dasharray的第二个值代表间隙的宽度，在这种情况下为0。

请参阅一个工作示例：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
 <style type="text/css">
        <![CDATA[
       .animateline{
        stroke-dasharray:400 20;
        stroke-dashoffset:300;
        animation:animatelinedraw 10000ms ease-in-out infinite forwards;
        }
        @keyframes animatelinedraw{
        50%{stroke-dashoffset:0;
            stroke-dasharray:400 0;
            }
        }
        ]]> 
  </style>
<polyline fill="none" stroke="#1D1D1B" stroke-miterlimit="10" points="466.797,219.464 466.797,456.751 39.678,456.751 
    39.678,40.932 466.797,40.932 466.797,219.464" class="animateline"/>
</svg>