如何从中心点开始制作svg线的动画？

从中心点开始制作SVG线的动画可以通过以下步骤实现：

1. 创建SVG元素：首先，在HTML文档中创建一个SVG元素，可以使用<svg>标签，并设置其宽度和高度。
2. 创建线条元素：使用SVG的<line>标签创建线条元素，并设置起始点和终点的坐标。可以使用x1、y1表示起始点的坐标，使用x2、y2表示终点的坐标。
3. 设置动画效果：使用SVG的<animate>标签为线条元素添加动画效果。可以使用attributeName属性指定要动画的属性，这里是线条元素的x2和y2属性。使用from属性指定起始值，使用to属性指定结束值。可以使用dur属性设置动画的持续时间。
4. 设置动画路径：使用SVG的<animateMotion>标签为线条元素添加动画路径。可以使用path属性指定动画路径的SVG元素，这里可以使用<path>标签创建一个路径元素，并设置其d属性来定义路径的形状。
5. 设置动画属性：使用SVG的<animate>标签为动画路径添加属性。可以使用attributeName属性指定要动画的属性，这里是路径元素的d属性。使用from属性指定起始值，使用to属性指定结束值。可以使用dur属性设置动画的持续时间。
6. 启动动画：使用SVG的<animateMotion>标签的begin属性设置动画的开始时间。可以使用indefinite值表示动画一直持续进行。

以下是一个示例代码：

<svg width="500" height="500">
  <line x1="250" y1="250" x2="250" y2="250" stroke="black">
    <animate attributeName="x2" from="250" to="400" dur="2s" />
    <animate attributeName="y2" from="250" to="400" dur="2s" />
  </line>
  <path d="M250,250 L400,400" id="path" />
  <line x1="250" y1="250" x2="250" y2="250" stroke="black">
    <animateMotion dur="2s" repeatCount="indefinite">
      <mpath href="#path" />
    </animateMotion>
  </line>
</svg>

这段代码创建了一个SVG画布，其中包含一个起始点和终点相同的线条元素。通过动画效果，线条元素的终点从起始位置移动到了(400, 400)的位置。同时，使用动画路径，线条元素沿着一个从起始点到终点的路径进行动画。动画持续时间为2秒。

请注意，以上示例中的代码只是一个简单的示例，实际应用中可以根据需求进行更复杂的动画效果和路径设置。

关于SVG动画的更多信息和示例，您可以参考腾讯云的SVG动画介绍页面：SVG动画介绍。