如何将SVG点线从一个点动画到另一个点？

Question

如何将SVG点线从一个点动画到另一个点？

3

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

我有这段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;
    }
}

- Giacomo Cerretini

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

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- enxaneta · Accepted Answer

一种动画的方法是使用 SMIL 动画，类似于这样：

通过使用 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" 观察：由于如果您不声明svg元素的宽度和高度，它将自动占用所有可用宽度，因此您不需要width="100%"。