遗漏的类型错误：无法读取空

问题描述：

我的SVG动画作品罚款codepen 遗漏的类型错误：无法读取空

的特性“getTotalLength”但是，当我把它添加到my page它不工作了。我一直在控制台收到此消息：

遗漏的类型错误：无法读取性能在animatePath空

的 'getTotalLength'（sf.js：4）

在sf.js：21

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

一旦你移动你的代码'path'是'null'，那么，是'被定义path'？ – Craicerjack

看起来，无论您传递给该函数的路径名是在页面上找不到的。确保你包含了。如果它是一个类或＃编号，如果它是一个ID –

它看起来像页面上没有元素'大' –

答

您必须等到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'); 
    ... 
}

遗漏的类型错误：无法读取空

相关推荐