svg动态绘制代码

下面是一个简单的 SVG 动态绘制代码示例：

<svg width="500" height="500">
  <path id="path" fill="none" stroke="black" stroke-width="5"></path>
</svg>

<script>
  const path = document.getElementById('path');
  const length = path.getTotalLength();
  path.style.strokeDasharray = length;
  path.style.strokeDashoffset = length;

  function drawPath(duration) {
    path.style.transition = `stroke-dashoffset ${duration}ms linear`;
    path.style.strokeDashoffset = 0;
  }

  drawPath(3000); // 绘制动画时长为 3 秒
</script>

这段代码中，我们使用了 SVG 的 `path` 元素绘制路径，并给它添加了一个 `id` 属性以便于 JavaScript 操作。通过调用 `getTotalLength` 方法，我们可以获取当前路径的总长度，进而设置 `stroke-dasharray` 和 `stroke-dashoffset` 属性，实现绘制的动画效果。最后，调用 `drawPath` 函数开始绘制动画，可以传入不同的时长参数以控制动画速度。