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

我正在尝试为一些svg路径的入口设置动画，但运气不好。以下是我目前掌握的情况：

这是我的

我得到一个错误“path.node不是函数”。 我哪里出错了？

您可以调用路径上的方法来获取维度

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);

    });

编辑：

试着这样做：

---

至少您可以获得尺寸。

这似乎可行。然后如何设置该路径的动画，以便从左侧开始并向右展开？我已经让它淡入，但它同时显示了整个线条。

$(".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);

    });

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