stroke-dasharray - stroke-dasharray 数字是如何工作的？

Question

我正在玩我在 codepen 上找到的很酷的效果：codepe n.io/P3R0/pen/zxabvb

我想让这个 svg 动画上的破折号更短，并且相信我已经找到了执行此操作的 css 元素：

stroke-dasharray: 70 330;

例如，当我将 70 减少到 30 时，破折号会变短，这很好。但是您会注意到它们不再顺畅地滑行 - 它们现在跳跃位置。

我一直在搜索并试图了解 stoke-dasharray 的工作原理，但无法解决。谁能向我解释这些数字是如何工作的，以及我如何制作更短的破折号，而这些破折号仍然可以顺利滑行。

谢谢你的帮助。

标签： stroke-dasharray

Answer 1

stroke-dasharray 的第一个参数是填充区域的长度，第二个参数是形状的总长度。您可以通过缩短总长度来修复动画，如下所示。

stroke-dasharray: <filled-length> <total-length>;

stroke-dasharray: 30 150;