javascript - Vivus JS 似乎没有为某些 节点设置动画

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>