Vivus JS, похоже, не оживляет определенных <path> узлов

Question

Я играю с библиотекой Vivus JS, что очень круто для анимации дорожек, таких как рисование изображения. Теперь у меня есть значок SVG, который должен анимироваться до 100% ширины линии, но, похоже, он не работает. На других значках в моем проекте он работает хорошо.

Смотрите эту CodePen: http://codepen.io/anon/pen/yOqdbN резюмировать следующим образом

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

Кто-нибудь знает, почему это происходит? Большое спасибо за любую помощь, указывающую на меня в правильном направлении.

Answer 1

Vivus работает animating the strokeDashOffset свойство path который требует, чтобы ваш путь имеет инсульт, определенный, например,

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

Обратите внимание, что из ваших узлов я вижу, что вы можете достичь лучших результатов настройки 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>