svg #path { stroke-dashoffset: 1000; animation: dash 4s linear forwards; } @keyframes dash { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } } 用js写

你可以使用JavaScript来实现这段SVG动画。首先，你需要获取对应的SVG元素和路径元素，然后设置初始的`stroke-dashoffset`属性值为1000。接下来，创建一个动画函数，将其绑定到路径元素的`animation`属性上，并设置动画的持续时间、动画效果以及最终状态。最后，你可以在CSS样式中定义`@keyframes`规则，指定动画的起始和结束状态。以下是示例代码：

<svg id="my-svg" width="200" height="200">
  <path id="my-path" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" stroke="black"/>
</svg>

// 获取SVG和路径元素
const svg = document.getElementById('my-svg');
const path = document.getElementById('my-path');

// 设置初始stroke-dashoffset值
path.style.strokeDashoffset = 1000;

// 创建动画函数
function animatePath() {
  path.style.animation = 'dash 4s linear forwards';
}

// 绑定动画函数到路径元素的animation属性
path.addEventListener('mouseover', animatePath);

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }

  to {
    stroke-dashoffset: 0;
  }
}

在上述示例中，当鼠标悬停在路径元素上时，动画函数`animatePath`会被调用，触发路径元素的动画效果。你也可以根据需要的事件来触发动画函数，例如点击事件或页面加载事件。