动画链接的 svg 不起作用;内联时工作正常

Animating a linked svg not working; Working fine when inline

我有一个由一堆路径组成的 svg 文件,我正在通过看到的方法制作动画 here。这是动画路径的标准方法——有破折号偏移和没有的。

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

$(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 而不是内联的 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);
});

如果您想查看上面的代码(在其中加载而不是内联),那就是 here

您的问题是父文档中定义的样式(stroke-dasharraystroke-dashoffset 规则)不适用于嵌入对象。 CSS 不级联成对象。

您可以使用 JavaScript 将样式规则直接添加到对象,也可以将 CSS 规则嵌入到外部 SVG 文件而不是父文档中。

This question 有更多详细信息。