Javascript 沿矩形路径平滑移动SVG线

我正在尝试重新创建以下动画：

我很难得到一条线来正确地在拐角处设置动画。我尝试过使用动画情感元素，如下所示：

<line class="testLine" x1="10" y1="10" x2="100" y2="10" stroke="white"> 
        <animateMotion dur="1.6s" repeatCount="indefinite" 
            path="M 10 10 L 390 10
             M 390 10 L 390 290
             M 390 290 L 10 290
             M 10 290 L 10 10"> 
        </animateMotion>
</line> 

---

但这条线并不是平滑的圆角。你知道如何让它像GIF所示在拐角处平滑移动吗？

你需要创建一个路径，使srtoke dasharray=矩形边的1/2，并将路径的笔划dashoffset设置为0

请阅读代码中的注释：

const SVG\u NS=”http://www.w3.org/2000/svg";
设sz=50//初始尺寸1/2矩形边
//路径的数组。在数组中，uou有路径#p的第一个对象
设sqRy=[{s:sz，d:，l:p.getTotalLength（），el:p}]；
//创建多条路径并相应地旋转这些路径
for（设i=1；i<8；i++）{
设o={}；
设size=sqRy[i-1].s/2；
o、 s=数学sqrt（2*尺寸*尺寸）；
//新路径的d属性的值
o、 d=`M-${o.s}、${o.s}L${o.s}、${o.s}${o.s}、${o.s}-${o.s}、${o.s}-${o.s}、${o.s}z`；
o、 el=document.createElements（SVG_NS，“路径”）；
o、 el.setAttribute（“d”，o.d）；//设置d属性
o、 el.setAttribute（“transform”，`rotate（${45*i}）`；//设置旋转
appendChild（o.el）；//将新路径追加到svg元素
o、 l=o.el.getTotalLength（）；//计算新路径的总长度
//将对象推送到阵列的路径
sqRy.push（o）；
}
//对于数组中的每个元素，设置笔划dasharray和笔划dashoffset。
sqRy.map（（sq）=>{
sq.el.setAttribute（“style”，stroke-dasharray:${sq.s}；stroke-dashoffset:${sq.l}`）；
});
svg{fill:none；stroke:black；}
路径{
动画：dash 16s线性无限；
}
@关键帧破折号{
到{
笔划偏移：0；
}
}
同样的事情就是缩放旋转和平方的对角乘法器-sqrt（2）


document.querySelector（'svg'）.innerHTML=[…数组（11）]
.map（（u，i）=>数学功率（2，i/2））
.map（（s，i）=>`
`)。加入（‘，’）
路径{
行程：5-5；
填充：无；
笔画：黑色；
动画：shift 3s无限线性；
}
@关键帧移动{
100%{stroke dashoffset:-20}
}
不是计算的，而是通过使用svg属性变换对齐svg矩形（首选svg路径），并使用css stroke dasharray和stroke offset进行动画，可以获得结果

如果js不是一个选项，那么您可以添加并对齐所需的矩形

代码


svg>rect{
行程：100；
-webkit动画：画5s无限线性；
/*铬、狩猎、歌剧*/
动画：画5s无限线性；
}
@关键帧绘制{
到{
行程偏移量：1000；
}
}
@-moz关键帧绘制{
到{
行程偏移量：1000；
}
}
@-webkit关键帧绘制{
到{
行程偏移量：1000；
}
}

请阅读关于css关键帧的内容，我认为您也可以这样做，或者没有？@Greg——但我要用css关键帧来完成它，我说的是没有任何js-在没有js的情况下绘制完整的svg，然后用css@Greg--如果你看一下js，你会发现你需要一些方法来计算正方形的大小，这样它们就可以完美地相互吻合。一旦有了它们，您就需要一种方法来计算每条路径的长度以及划线阵列的笔划和间距值。你不能用css来完成这一切