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

Question

我有一个由一堆路径组成的 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。

Answer 1

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

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

This question 有更多详细信息。

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

Animating a linked svg not working; Working fine when inline

javascript

html

svg

svg-animate