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>

设置SVG动画线

1 个答案: