大佬教程收集整理的这篇文章主要介绍了SVG 路径未按预期设置动画的问题，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在使用关于内嵌 SVG 的 this 视频教程作为参考。我试图复制使 SVG 线看起来从中间点画出来的效果。视频中的方法和我的方法之间的唯一区别是，在视频中，SVG 行具有预定义的长度，而我的则是可变长度。@H_262_3@
该方法背后的想法非常简单。您可以创建任意大小的 SVG 线，然后将其 stroke-dasharray 属性设置为 '0,length/2'，并将它的 stroke-dashoffset 属性设置为 '-length/2'，这样该线就不会在首先，它的“起点”设置在它的中间点。然后，当相关输入字段被聚焦时，您将 dasharray 属性更改为 'length,0' 并将 dashoffset 属性更改为 0。这使得虚线等于线的长度。这应该使线条看起来是从中间点画出来的，如果你从一开始就知道线条的长度，这确实会发生。但是，当我尝试使用没有预定长度的线来实现这种方法时，情况并非如此。我的线条似乎几乎从线条的开头而不是从中间点开始绘制。我很困惑为什么会发生这种情况。我正在使用 JavaScript 来计算线的长度。下面是我的代码片段。@H_262_3@
function animateline() {
const input = document.querySELEctor('.input');
const line = document.querySELEctor('.focus');
const length = line.getTotALLENgth();
line.style.strokeDasharray = `0,${length/2}`;
line.style.strokeDashoffset = `-${length/2}`;
input.addEventListener('focus',function() {
line.style.strokeDasharray = `${length},0`;
line.style.strokeDashoffset = `0`;
});
};
animateline();/* input module */
.input {
BACkground: none;
border: none;
wIDth: 100 %;
padding: 0.5em;
padding-left: 0;
color: white;
Font-family: inherit;
Font-size: 0.85em;
}
.input:focus {
outline: none;
}
.line {
wIDth: 100%;
height: 2px;
padding: 0;
stroke: grey;
}
.focus {
stroke: black;
Transition: all 5s;
stroke-dasharray: 0,10000;
}<!DOCTYPE HTML>
<HTML lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0">
<title>document</title>
</head>
<body>
<input class="input" type="text" name="revIEw[body]" placeholder="Leave a revIEw..." required>
<svg xmlns="http://www.w3.org/2000/svg" class="line" vIEwBox="0 0 40 2" preserveAspectRatio="none">
<path d="M0 1 L40 1"></path>
<path d="M0 1 L40 1" class="focus"></path>
</svg>
</body>
</HTML>以上是大佬教程为你收集整理的SVG 路径未按预期设置动画的问题全部内容，希望文章能够帮你解决SVG 路径未按预期设置动画的问题所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。