未捕获的TypeError：无法读取null

Question

我的SVG动画在codepen

上运行正常

但是当我将它添加到my page时，它不再起作用了。我一直在控制台中收到此消息：

未捕获的TypeError：无法读取null的属性'getTotalLength'

at animatePath（sf.js：4）

at sf.js：21

4 var length = path.getTotalLength(); 21 animatePath('#bigs', 'stroke-dashoffset 0.6s ease-in-out');

Answer 1

您必须等到SVG加载并且DOM准备就绪才能获得对路径的引用。你的Javascript运行得太快了，所以

var path = document.querySelector(pathname);

返回null。

这不会影响codepen，因为它在加载后运行Javascript。

要解决此问题，请将animatePath()电话打包成以下内容：

window.onload = function() {
  animatePath('#bigs', 'stroke-dashoffset 0.6s ease-in-out');
  animatePath('#a1', 'stroke-dashoffset 0.5s 0.5s ease-in-out');
  ...
}