如何为这些路径的入口设置动画？

Question

我试图为一些svg路径的入口制作动画，没有运气。这是我到目前为止所做的：

这是我的fiddle

$(".line").each(function(i){
        var path = $(this);

        var totalLength = path.node().getTotalLength();
        path.attr("stroke-dasharray", totalLength + " " + totalLength).attr("stroke-dashoffset", totalLength)
            .duration(1000).ease("linear").attr("stroke-dashoffset", 0);

    });

我收到错误“path.node不是函数”。 我哪里错了？

Answer 1

您可以在路径上调用getBoundingClientRect()方法获取维度

var w = myPath.getBoundingClientRect().width;
var h = myPath.getBoundingClientRect().height;

你可以试试这个

$(".line").each(function(i){
        var path = $(this);
        var totalLength = path.getBoundingClientRect().width;
        path.attr("stroke-dasharray", totalLength + " " + totalLength).attr("stroke-dashoffset", totalLength)
            .duration(1000).ease("linear").attr("stroke-dashoffset", 0);

    });

修改

尝试这种方式：

Fiddle

var c = document.getElementsByTagName("path");
var rec = c[0].getBoundingClientRect();
var totalLength = rec.width;

至少你可以获得尺寸。