如何使用JavaScript为SVG矩形的跟踪设置动画？

为了一个我正在做的游戏

我想能够画一个SVG矩形；使用百分比值50%将绘制矩形笔划的一半。 我需要在Javascript中这样做，因为我会经常更新值

<svg id="rectangle-timer" style="width:100%;height:100%;">
    <rect width="100%" height="100%"/>
</svg>

我看到了非常好的JS库，比如or，但它们似乎与路径一起工作，而不是与基本形状（比如矩形）一起工作

有人能帮忙吗

---

谢谢。

这是我的解决方案：SVG保留了Aspectratio=none样式=宽度：100%；高度：100vh；路径的总长度为2*window.innerWidth+2*window.innerHeight；笔划dasharray和笔划dashoffset都与路径的总长度相等

我正在使用输入类型=范围来设置笔划偏移的动画。 为了保持笔划宽度并避免拉伸，我使用矢量效果=非缩放笔划

我希望这就是你需要的

功能计时器{ 总长度=2*window.innerWidth+2*window.innerHeight； thePath.setAttributesNull，style，`stroke dashoffset:${totalLength*1-range.value}` } 计时器 范围。addEventListenerinput，定时器； setTimeoutfunction{ 计时器 addEventListener'resize'，timer，false； }, 15; *{边距：0；填充：0；} 路径{ 行程阵列：calc2*100vw+2*100vh； 行程偏移量：calc2*100vw+2*100vh； } 矩形计时器{background:dfdfdf} [类型=范围]{ 位置：绝对位置； 显示：块； 宽度：200px； 高度：20px； 排名：0； 底部：0； 左：0； 右：0； 保证金：自动； }

---

这是我的解决方案：SVG保留AspectRatio=none样式=宽度：100%；高度：100vh；路径的总长度为2*window.innerWidth+2*window.innerHeight；笔划dasharray和笔划dashoffset都与路径的总长度相等

我正在使用输入类型=范围来设置笔划偏移的动画。 为了保持笔划宽度并避免拉伸，我使用矢量效果=非缩放笔划

我希望这就是你需要的

功能计时器{ 总长度=2*window.innerWidth+2*window.innerHeight； thePath.setAttributesNull，style，`stroke dashoffset:${totalLength*1-range.value}` } 计时器 范围。addEventListenerinput，定时器； setTimeoutfunction{ 计时器 addEventListener'resize'，timer，false； }, 15; *{边距：0；填充：0；} 路径{ 行程阵列：calc2*100vw+2*100vh； 行程偏移量：calc2*100vw+2*100vh； } 矩形计时器{background:dfdfdf} [类型=范围]{ 位置：绝对位置； 显示：块； 宽度：200px； 高度：20px； 排名：0； 底部：0； 左：0； 右：0； 保证金：自动； }

---

大多数库使用路径元素的原因是它们继承自SVGGeometryElement原型，这为您提供了计算路径长度的便捷函数。如果我们把这个矩形换成这样的路径：

<path d="M 0 0 L 1 0 L 1 1 L 0 1 z" />

---

大多数库使用路径元素的原因是它们继承自SVGGeometryElement原型，这为您提供了计算路径长度的便捷函数。如果我们把这个矩形换成这样的路径：

<path d="M 0 0 L 1 0 L 1 1 L 0 1 z" />

---

不幸的是，由于拉伸，这种方法会产生一个笔划宽度不同的矩形，这取决于它是否是垂直边的水平边。@PaulLeBeau它不是。我使用的是矢量效果=非缩放频闪。遗憾的是，由于拉伸的原因，这种方法会产生一个笔划宽度不同的矩形，这取决于它是水平边还是垂直边。@PaulLeBeau它不是。我使用的是矢量效果=非缩放频闪。错过了对不起，谢谢你的帮助。下面是我最终的实现方式：updateQuestionTimerGuipercent{var el=$'question-timer'.get0；如果el{var pathLen=el.getTotalLength；var adjustedLen=percent*pathLen/100；el.setAttribute'stroke-dasharray'，adjustedLen+''+pathLen；}@gordie，我会一直保持0-1的范围，因为这意味着你需要做更少的反向转换，但是的，这看起来是可行的！谢谢你的帮助。下面是我最终的实现方式：updateQuestionTimerGuipercent{var el=$'question-timer'.get0；如果el{var pathLen=el.getTotalLength；var adjustedLen=percent*pathLen/100；el.setAttribute'stroke-dasharray'，adjustedLen+''+pathLen；}@gordie，我会一直保持0-1的范围，因为这意味着你需要做更少的反向转换，但是的，这看起来是可行的！