制作svg动画工具（使用MacSVG创建）
制作svg动画工具（使用MacSVG创建）根据其 官网 说，MacSVG 由阿肯色州康威的 Douglas Ward 开发，是一个“用于设计 HTML5 SVG 艺术和动画的开源 Mac OS 应用程序”。MacSVG 是一款可以让你的图像动起来的工具。你可以在 GitHub 上找到源代码。出现在网页上的动画文本和对象是建立用户兴趣和参与度的好方法。有几种方法可以实现这一点，例如视频嵌入、动画 GIF 或幻灯片 —— 但你也可以使用 可缩放矢量图形（SVG） 。SVG 图像与 JPG 不同，因为它可以缩放而不会丢失其分辨率。矢量图像是由点而不是像素创建的，所以无论它放大到多大，它都不会失去分辨率或像素化。充分利用可缩放的静态图像的一个例子是网站的徽标。你可以使用多种绘图程序创建 SVG 图像，包括开源的 Inkscape 和 Adobe Illustrator。让你的图像“能动起来”需要更多的努力。幸运的是，有一些开源解决方案甚至
你可以使用多种绘图程序创建 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"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" height="360px" style="zoom: 1;" cursor="default" id="svg_document" width="480px" baseProfile="full" version="1.1" preserveAspectRatio="xMidYMid meet" viewBox="0 0 480 360"><title id="svg_document_title">Path animation with stroke-dasharray</title><desc id="desc1">This example demonstrates the use of a path element an animate element and the stroke-dasharray attribute to simulate drawing.</desc><defs id="svg_document_defs"></defs><g id="main_group"></g><path stroke="#004d40" id="path2" stroke-width="9px" d="M86 75 C86 75 75 72 72 61 C69 50 66 37 71 34 C76 31 86 21 92 35 C98 49 95 73 94 82 C93 91 87 105 83 110 C79 115 70 124 71 113 C72 102 67 105 75 97 C83 89 111 74 111 74 C111 74 119 64 119 63 C119 62 110 57 109 58 C108 59 102 65 102 66 C102 67 101 75 107 79 C113 83 118 85 122 81 C126 77 133 78 136 64 C139 50 147 45 146 33 C145 21 136 15 132 24 C128 33 123 40 123 49 C123 58 135 87 135 96 C135 105 139 117 133 120 C127 123 116 127 120 116 C124 105 144 82 144 81 C144 80 158 66 159 58 C160 50 159 48 161 43 C163 38 172 23 166 22 C160 21 155 12 153 23 C151 34 161 68 160 78 C159 88 164 108 163 113 C162 118 165 126 157 128 C149 130 152 109 152 109 C152 109 185 64 185 64 " fill="none" transform=""><animate values="0 1739;1739 0;" attributeType="XML" begin="0; animate1.end 5s" id="animateSig1" repeatCount="indefinite" attributeName="stroke-dasharray" fill="freeze" dur="2"></animate></path></svg>
你会使用 MacSVG 做什么？
via: https://opensource.com/article/18/10/macsvg-open-source-tool-animation
作者： Jeff Macharyas 选题： lujun9972 译者： wxy 校对： wxy
本文由 LCTT 原创编译， Linux中国 荣誉推出
点击“了解更多”可访问文内链接
