如何将 svg 虚线从一个点设置为另一个点？

【问题标题】：How to animate svg dotted line from one point to another?如何将 svg 虚线从一个点设置为另一个点？
【发布时间】：2019-12-28 01:35:50
【问题描述】：

我想了解如何制作这样的动画：

我有这个 svg 代码（x1,x2,y1,y2 是动态赋值）

<svg id={props.id} class="connect" width="100%" height="100%" viewBox="100%">
   <line lass="path_in" x1={x1} y1={y1} x2={x2} y2={y2} stroke="#5184AF" stroke-width="5" stroke-linecap="round" stroke-dasharray="1, 10"/>
</svg>

我试试这个：

svg .path_in {
    stroke-dasharray: 1300;
    animation: dash 4s linear;
    -webkit-animation: dash 4s linear;
  }
  @keyframes dash {
    from {
      stroke-dashoffset: 1300;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  @-webkit-keyframes dash {
    from {
      stroke-dashoffset: 1300;
    }
    to {
      stroke-dashoffset: 0;
    }
}

【问题讨论】：

显然“lass”而不是“class”是复制粘贴错误，抱歉

标签： html css xml animation svg

【解决方案1】：

一种对其进行动画处理的方法是使用这样的 SMIL 动画：

svg{border:1px solid}

<svg viewBox="0 0 100 50">
   <line lass="path_in" x1="10" y1="25" x2="10" y2="25" stroke="#5184AF" stroke-width="5" stroke-linecap="round" stroke-dasharray="1, 10">
    <animate 
       attributeName="x2"
       attributeType="XML"
       from="10" to="90"
       dur="4s"
       repeatCount="indefinite"/>
   </line>
</svg>

在此演示中，<animate> 元素正在为 x2 属性 from="10"（与 x1 相同的值）to="90" 设置动画。动画时长为 4 秒：dur="4s"

注意：你不需要width="100%"，因为如果你不声明svg元素的宽度和高度，默认情况下会占用所有可用的宽度。

【讨论】：

完美，这就是我想要的