Vivus JS doesn't seem to animate certain <path> nodes

Question

I'm playing with the Vivus JS library, which is very cool for animating paths like drawing a picture. Now, I have this SVG icon that should animate to a 100% line-width, but it doesn't seem to work. On other icons in my project it works well.

See this CodePen: http://codepen.io/anon/pen/yOqdbN summarized as follows

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="...">
  <path d="...">
</svg>

Does anyone know why this is happening? Thank you very much for any help pointing me in the right direction.

Answer 1

Vivus works by animating the strokeDashOffset property of a path which requires that your path has a stroke defined , eg

<path d="..." stroke="black">

Note that from your nodes I see that you can achieve better results setting fill="transparent"

 var els = document.querySelectorAll('path'); Array.prototype.slice.call(els).forEach(function(el) { el.setAttribute('stroke', 'black') el.setAttribute('fill', 'transparent') }) var SVGcrown = new Vivus('SVGcrown', { duration: 300, animTimingFunction: Vivus.EASE_OUT });

 body { background: #FFF; } #SVGcrown { width: 100px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.0/vivus.js"></script> <svg id="SVGcrown" enable-background="new 0 0 48 48" version="1.1" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M41.93,38H6.07l-0.251-0.167C2.175,35.413,0,31.363,0,27c0-7.168,5.832-13,13-13c2.069,0,4.128,0.499,5.954,1.442 l-0.918,1.777C16.47,16.41,14.776,16,13,16C6.935,16,2,20.935,2,27c0,3.594,1.744,6.936,4.681,9h34.638 C44.256,33.936,46,30.594,46,27c0-6.065-4.935-11-11-11c-1.778,0-3.473,0.411-5.04,1.222l-0.919-1.775 C30.868,14.5,32.929,14,35,14c7.168,0,13,5.832,13,13c0,4.363-2.175,8.413-5.819,10.833L41.93,38z" /> <path d="M42,48H6c-2.611,0-3.978-2.013-3.978-4.001C2.022,42.012,3.389,40,6,40h36c2.611,0,3.978,2.013,3.978,4.001 C45.978,45.988,44.611,48,42,48z M6,42c-1.46,0-1.978,1.077-1.978,1.999C4.022,44.922,4.54,46,6,46h36 c1.46,0,1.978-1.077,1.978-1.999C43.978,43.078,43.46,42,42,42H6z" /> <path d="M12.695,32.032c-0.411,0-0.795-0.255-0.942-0.663C11.253,29.97,11,28.5,11,27c0-7.168,5.832-13,13-13s13,5.832,13,13 c0,1.49-0.251,2.952-0.746,4.346c-0.186,0.52-0.76,0.789-1.277,0.607c-0.521-0.185-0.792-0.757-0.608-1.277 C34.788,29.498,35,28.262,35,27c0-6.065-4.935-11-11-11s-11,4.935-11,11c0,1.27,0.214,2.513,0.637,3.695 c0.186,0.521-0.085,1.093-0.605,1.278C12.92,32.014,12.807,32.032,12.695,32.032z" /> <path d="M24,12c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S27.309,12,24,12z M24,2c-2.206,0-4,1.794-4,4s1.794,4,4,4 s4-1.794,4-4S26.206,2,24,2z" /> <path d="M29,7H19c-0.552,0-1-0.447-1-1s0.448-1,1-1h10c0.552,0,1,0.447,1,1S29.552,7,29,7z" /> <path d="M24,16c-0.552,0-1-0.447-1-1v-4c0-0.553,0.448-1,1-1s1,0.447,1,1v4C25,15.553,24.552,16,24,16z" /> </svg>