svg 动画_使用 MacSVG 创建 SVG 动画

你可以使用多种绘图程序创建 SVG 图像，包括开源的 Inkscape 和 Adobe Illustrator。让你的图像“能动起来”需要更多的努力。幸运的是，有一些开源解决方案甚至可以引起 Belshazzar 的注意。

-- Jeff Macharyas(作者)

开源 SVG：墙上的魔法字。

新巴比伦的摄政王 伯沙撒 没有注意到他在盛宴期间神奇地 书写在墙上的文字 。但是，如果他在公元前 539 年有一台笔记本电脑和良好的互联网连接，他可能会通过在浏览器上阅读 SVG 来避开那些讨厌的波斯人。

出现在网页上的动画文本和对象是建立用户兴趣和参与度的好方法。有几种方法可以实现这一点，例如视频嵌入、动画 GIF 或幻灯片 —— 但你也可以使用 可缩放矢量图形(SVG) 。

SVG 图像与 JPG 不同，因为它可以缩放而不会丢失其分辨率。矢量图像是由点而不是像素创建的，所以无论它放大到多大，它都不会失去分辨率或像素化。充分利用可缩放的静态图像的一个例子是网站的徽标。

动起来，动起来

你可以使用多种绘图程序创建 SVG 图像，包括开源的 Inkscape 和 Adobe Illustrator。让你的图像“能动起来”需要更多的努力。幸运的是，有一些开源解决方案甚至可以引起伯沙撒的注意。

MacSVG 是一款可以让你的图像动起来的工具。你可以在 GitHub 上找到源代码。

根据其 官网 说，MacSVG 由阿肯色州康威的 Douglas Ward 开发，是一个“用于设计 HTML5 SVG 艺术和动画的开源 Mac OS 应用程序”。

我想使用 MacSVG 来创建一个动画签名。我承认我发现这个过程有点令人困惑，并且在我第一次尝试创建一个实际的动画 SVG 图像时失败了。

重要的是首先要了解要展示的书法内容实际写的是什么。

动画文字背后的属性是 stroke-dasharray 。将该术语分成三个单词有助于解释正在发生的事情：“stroke” 是指用笔(无论是物理的笔还是数字化笔)制作的线条或笔画。“dash” 意味着将笔划分解为一系列折线。“array” 意味着将整个东西生成为数组。这是一个简单的概述，但它可以帮助我理解应该发生什么以及为什么。

使用 MacSVG，你可以导入图形(.PNG)并使用钢笔工具描绘书写路径。我使用了草书来表示我的名字。然后，只需应用该属性来让书法动画起来、增加和减少笔划的粗细、改变其颜色等等。完成后，动画的书法将导出为 .SVG 文件，并可以在网络上使用。除书写外，MacSVG 还可用于许多不同类型的 SVG 动画。

在 WordPress 中书写

我准备在我的 WordPress 网站上传和分享我的 SVG 示例，但我发现 WordPress 不允许进行 SVG 媒体导入。幸运的是，我找到了一个方便的插件：Benbodhi 的 SVG 支持 插件允许快速、轻松地导入我的 SVG，就像我将 JPG 导入媒体库一样。我能够在世界各地向巴比伦人展示我 写在墙上的魔法字 。

我在 Brackets 中开源了 SVG 的源代码，结果如下：

<?xml version="1.0" encoding="utf-8" standalone="yes"?>Path animation with stroke-dasharrayThis example demonstrates the use of a path element, an animate element, and the stroke-dasharray attribute to simulate drawing.

你会使用 MacSVG 做什么？

---