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元素来验证这一点 - {{ 1}} property应该有一个等于每个路径长度的值）。

问题是，尽管值正确地改变为应该触发动画的内容，但没有任何动画。我不知道为什么会这样，因为代码操作与内联文件完全相同，除了查看svg文档而不是当前文档...这里是脚本的修改版本（用于处理）一个加载的svg而不是内联的）：

stroke-dasharray

如果您希望看到上面的代码在运行中（加载而不是内联），那就是here。

Answer 1

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

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

This question有更多详情。

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

1 个答案: