javascript - 未捕获的类型错误 : Cannot read property 'getTotalLength' of null

Question

我的 SVG 动画在 codepen 上运行良好

但是当我将它添加到 my page 时它不再工作了。我不断在控制台中收到此消息:

未捕获的类型错误:无法读取 null 的属性“getTotalLength”

在 animatePath (sf.js:4)

在 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。

这不会影响代码笔，因为它在加载后运行 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');
  ...
}