javascript - 如何使用 JavaScript 动画化跟踪 SVG 矩形？

Question

对于我正在开发的游戏，

我希望能够绘制一个 SVG 矩形；使用百分比值(50% 将绘制矩形描边的一半)。
我需要在 Javascript 中执行此操作，因为我会经常更新该值。

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

我看到了相当不错的 JS 库，比如 drawSVG或 Vivus ，但它们似乎适用于路径，而不适用于矩形等基本形状。

有人能帮忙吗？

谢谢。

Answer 1

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

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

我们得到完全相同的输出，但它更可控。之后，我们只需调整样式中的 strokeDasharray 值即可扩展和删除一些笔划。对于此属性，我们只需要两个值:初始破折号大小和初始空白空间。因此，当我们的进度为 0 时，我们希望第一个值为 0，第二个为路径长度，当我们接近 1 时，我们希望第二个值为 0，第一个增加路径长度。

function update( amount ){
  
  const total = rect.getTotalLength();
  const filled = total * amount;
  const none = total - filled;
  
  rect.style.strokeDasharray = `${filled} ${none}`;
  
}

const rect = document.getElementById( 'rectangle' );
const input = document.getElementById( 'input' );

input.addEventListener( 'mousemove', event => update( input.value ));
update( input.value );

<svg width="200px" height="200px" viewBox="0 0 200 200">
    <path d="M 20 20 L 180 20 L 180 180 L 20 180 z" id="rectangle" fill="none" stroke="black" stroke-width="10" />
</svg>

<input id="input" type="range" min="0" max="1" step=".01" />

如果你坚持使用rect，你可以通过将矩形的宽度和高度乘以两次来得到矩形的路径长度，它看起来像这样:

function update( amount ){
  
  const total = rect.width.baseVal.value * 2 + rect.height.baseVal.value * 2;
  const filled = total * amount;
  const none = total - filled;
  
  rect.style.strokeDasharray = `${filled} ${none}`;
  
}

const rect = document.getElementById( 'rectangle' );
const input = document.getElementById( 'input' );

input.addEventListener( 'mousemove', event => update( input.value ));
update( input.value );

<svg width="200px" height="200px" viewBox="0 0 200 200">
    <rect x="20" y="20" width="160" height="160" id="rectangle" fill="none" stroke="black" stroke-width="10" />
</svg>

<input id="input" type="range" min="0" max="1" step=".01" />

然而，从长远来看，这将意味着通用性降低，因此我建议切换到 path。