1

寻找有关如何使用 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 的一端设置动画会相对容易，但我在获取路径时遇到了问题......

4

3 回答 3

1

从相关字形中提取路径，然后在每个路径上应用本示例中所示的破折号数组动画。

于 2012-12-13T10:00:52.363 回答
0

一种可能性……据我所知，SVG 字体存储为一系列用于绘制单个字符的 SVG 命令。SVG 中基于矢量的绘图特性似乎可以实时“追踪”字符；您也许可以制作一个转换实用程序来将 SVG 字体预转换为简单路径。

于 2012-12-12T19:47:52.040 回答
0

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

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

于 2012-12-12T19:37:02.077 回答