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

Question

我正在尝试为一些 svg 路径的入口设置动画，但没有运气。这是我到目前为止所拥有的：

这是我的小提琴

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

    });

编辑：

试试这种方式：

小提琴

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

至少您将能够获得尺寸。