如何像激光一样追踪字母

Question

寻找有关如何使用 SVG 以草书字体绘制出一个单词的动画的想法。 动画可以用SMIL或JavaScript完成，我不在乎 - 尽管我认为使用SMIL会更容易。

我很确定，如果我能将字母表示为路径，我就可以弄清楚如何将一条线从固定点动画化到单词路径 - 即使路径是非连续的。

有什么想法吗？

编辑我的演示非常基础，基本上我为每个字母编写了动画函数并安排了它们的时间。 例如，这是字母 X：

<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
   <rect x="0" y="0" width="100%" height="100%" fill="black"/>
   <path id="word" stroke="red" d="M10 10 L40 40 M40 10 L10 40" />
   <line x1="10" y1="10" x2="25" y2="50" stroke="blue" stroke-width="0.5">
      <animate attributeName="x1" begin="0s" dur="1s" values="10; 40;" />
      <animate attributeName="y1" begin="0s" dur="1s" values="10; 40;" />
      <animate attributeName="x1" begin="1s" dur="1s" values="40; 10;" />
      <animate attributeName="y1" begin="1s" dur="1s" values="10; 40;" />
      <set attributeName="visibility" to="hidden" begin="2s" />
   </line>
</svg>

我相信我们都同意这不是一个理想的长期解决方案...... 我以为沿着路径对 LINE 的一端进行动画处理相对容易，但我在获取路径时遇到了问题......

Answer 1

从有问题的字形中提取路径，然后在每个路径上应用虚线数组动画，如本例所示。

Answer 2

从高层次的角度来看，我认为你会想要做一些事情，比如将字体渲染到画布上，然后使用像素信息来生成动画序列。 一个简单的算法可以从左到右追踪，找出一条笔画路径会困难得多，但这也是可行的。

你没有提到任何关于什么平台或任何时间限制的想法，所以很难比这更接近。

Answer 3

一种可能性...据我了解，SVG 字体存储为用于绘制单个字符的 SVG 命令序列。 在 SVG 中绘制的基于矢量的性质似乎适合实时"追踪"字符;您也许能够制作转换实用程序，将 SVG 字体预转换为简单路径。