svg path анимировать весь весь путь

Question

У меня есть простой путь, который анимируется с from="0%" to="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> 

http://jsfiddle.net/8g2k2cy4/

Answer 1

Ок, нашел путь к ней, может быть, есть более эффективные способы ...

Так элемент path SVG имеет .getTotalLength(); метод, который возвращает длину пути. Таким образом, я могу применить/использовать это в animate элемента с помощью JavaScript, как:

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

http://jsfiddle.net/8g2k2cy4/1/