对链接的 svg 进行动画处理不起作用;内联时工作正常

我有一个由一堆路径组成的 svg 文件，我正在通过这里看到的方法对其进行动画处理。这是对路径进行动画处理的标准方法 — 带有虚线偏移量的方法和其他方法。

我已经测试了代码，当它以内联方式编写时，它在我的 svg 文件上运行良好——也就是说，svg 路径的代码直接写入与脚本相同的文档中。你可以在这里看到它的实际效果。使用的脚本是这样的：

$(document).ready(function(){
    var path = document.getElementsByTagName('path');
    var length;
    var anim = document.getElementsByTagName('animate');
    for(i = 0; i < path.length; i++){
        length = path[i].getTotalLength().toString();
        path[i].setAttribute('stroke-dasharray',length+','+length);
        anim[i].setAttribute('values','-'+length+';0');
    }
});

但是，当尝试使其与<object>中的svg文件一起使用时，我就没有那么幸运了。我已正确放置文件，并且显示正常。当我运行修改后的脚本时，它运行良好，并将长度值和不分配给每个<path>和<animate>元素（您可以通过检查 svg 元素来验证这一点 — stroke-dasharray 属性的值应等于每个路径的长度）。

问题是，尽管值正确更改为应触发动画的值，但没有任何动画。我不确定为什么会这样，因为代码的操作与内联代码完全相同，除了查看 svg 文档而不是当前文档......以下是脚本的修改版本（使用加载的 SVG 而不是内联版本）：

$(document).ready(function(){
    var a = document.getElementById("logoSVG");
    //it's important to add an load event listener to the object, as it will load the svg doc asynchronously
    a.addEventListener("load",function(){
        var svgDoc = a.contentDocument; //get the inner DOM of .svg
        var path = svgDoc.getElementsByClassName('line');
        var length;
        var anim = svgDoc.getElementsByTagName('animate');
        for(i = 0; i < path.length; i++){
            length = path[i].getTotalLength().toString();
            path[i].setAttribute('stroke-dasharray',length+','+length);
            anim[i].setAttribute('values','-'+length+';0');
        }
    },false);
});

如果您想查看上面的代码（加载而不是内联），请在此处。