Javascript svg路径设置整个路径的动画

我有一个简单的路径，从=0%到=100%设置动画，但只显示了路径的一部分。如何设置从行乞到路径终点的动画

<svg>
    <path d="M100,100 S150,100 200,150 S150,150 100,200 S100,200 100,300 S200,300 300,300 S200,300 100,200 S100,200 100,300 S200,300 300,300 S315,300 330,200" stroke="black" stroke-width="1" fill="none" stroke-dasharray="100000,100000" id="foo">
        <animate xlink:href="#foo" attributeName="stroke-dasharray" dur="1s" fill="freeze" from="0%" to="100%"></animate>
    </path>
</svg>

---

好吧，找到一个方法，也许有更好的方法

因此svg路径元素有一个.getTotalLength；方法返回路径长度。这样，我可以通过JavaScript在动画元素中应用/使用它，如：

var animEl = document.querySelector('animate');
animEl.setAttribute('to', animEl.parentNode.getTotalLength());