Javascript SVG路径未按预期设置动画的问题

我正在使用有关内联SVG的视频教程作为参考。我试图复制这样一种效果，即使SVG线条看起来像是从中间点向上延伸。来自视频的方法和我的方法之间的唯一区别是，在视频中，SVG行具有预定义的长度，而我的行具有可变长度

这种方法背后的想法非常简单。创建一条任意大小的SVG线，然后将其stroke dasharray属性设置为“0，length/2”，并将其stroke dashoffset属性设置为“-length/2”，以便一开始根本不绘制该线，并将其“起点”设置为其中点。然后，在聚焦相关输入字段时，将dasharray属性更改为“length，0”，并将dashoffset属性更改为0。这使破折号等于直线的长度。这会使线条看起来像是从中间点开始画，如果你从一开始就知道了线条的长度，这确实会发生。然而，当我尝试使用没有预定长度的行来实现这种方法时，情况并非如此。我的线似乎是从线的最开始，而不是从中间点开始画的。我不明白为什么会发生这种情况。我正在使用JavaScript计算行的长度。下面是我的代码片段

函数animateLine（）{
常量输入=document.querySelector（'.input'）；
const line=document.querySelector（'.focus'）；
const length=line.getTotalLength（）；
line.style.strokeDasharray=`0，${length/2}`；
line.style.strokedashcoffset=`-${length/2}`；
input.addEventListener（'focus'，function（）{
line.style.strokeDasharray=`${length}，0`；
line.style.strokedashcoffset=`0`；
});
};
动画线（）
/*输入模块*/
.输入{
背景：无；
边界：无；
宽度：100%；
填充：0.5em；
左侧填充：0；
颜色：白色；
字体家族：继承；
字号：0.85em；
}
.输入：焦点{
大纲：无；
}
.线路{
宽度：100%；
高度：2倍；
填充：0；
笔画：灰色；
}
.焦点{
笔画：黑色；
过渡：所有5s；
笔划数组：0，10000；
}

文件
我解决了这个问题。这是一个令人尴尬的错误，但无论如何，我都会把它留在这里，以防任何人也遇到这个问题

我使用“transition:all 5s”来更好地了解中间点在哪里，当时我将SVG行设置为动画。问题是，在开始时，我将stroke dasharray设置为“0，10000”以使线不可见，而我没有设置stroke dashoffset属性，因为我认为需要首先确定中间点是什么。然后我将这两个属性设置为它们应该使用的JavaScript。这触发了到initiate的转换，耗时5秒。所以当我专注于相关的输入元素时，我并没有像我想的那样从中间点开始动画；当我加载到页面时，我没有等待5秒钟，这并没有给初始动画足够的时间来完成到行的中间点

这一切都是由于我的误解。我的理解是SVG行的长度与包含它的div的大小成正比（因为我将'line'类的宽度设置为100%）。但是，SVG大小实际上是使用视口单位计算的，而不是像素或其他绝对单位。知道了这一点，我意识到我可以使用一种更简单的方法实现我所期望的效果，而不涉及JavaScript。我们可以简单地忽略SVG的实际显示大小，只关注最初设置的视口单位。默认情况下，浏览器将使该视口单位与SVG可用的任何空间成比例。因此，不必计算SVG路径的长度，我们只需使用20个视口单位的宽度作为SVG线的中点，因为我们知道这些视口单位将与SVG可用的空间成比例。我想强调的是，这将适用于任何长度的线，只要您使用的视口为40


/*输入模块*/
.输入{
背景：无；
边界：无；
宽度：100%；
填充：0.5em；
左侧填充：0；
颜色：黑色；
字体家族：继承；
字号：0.85em；
}
.输入：焦点{
大纲：无；
}
/*SVG*/
.线路{
宽度：100%；
高度：2倍；
填充：0；
笔画：灰色；
}
.焦点{
笔画：黑色；
过渡：所有2；
笔划数组：0,20；
行程偏移：-20；
}
.input:focus~.line.focus{
行程：40；
笔划偏移：0；
}

文件