可缩放矢量地图_使用MacSVG创建动画，可缩放的矢量图形图像

可缩放矢量地图

新巴比伦的摄政王伯沙撒（Belshazzar）没有注意在他的大餐中神奇出现的墙上的文字 。 但是，如果他在公元前539年拥有一台笔记本电脑和良好的互联网连接，那么他可能通过阅读浏览器上的SVG避免了那些讨厌的波斯人。

动画化网页上的文本和对象是建立用户兴趣和参与度的好方法。 有多种方法可以实现此目的，例如视频嵌入，动画GIF或幻灯片显示，但您也可以使用可缩放矢量图形 （SVG）。

SVG图像不同于JPG，因为它是可缩放的而不会损失其分辨率。 矢量图像是由点而不是点创建的，因此无论图像变大，它都不会失去分辨率或像素化。 很好地使用可缩放的静态图像的一个示例是网站上的徽标。

移动它，移动它

您可以使用多个绘图程序（包括开源Inkscape和Adobe Illustrator）创建SVG图像。 让您的图像“做某事”需要更多的努力。 幸运的是，有开源解决方案甚至可以引起Belshazzar的注意。

MacSVG是一种可以移动图像的工具。 您可以在GitHub上找到源代码。

据其网站称 ，MacSVG由阿肯色州康威市的道格拉斯·沃德（Douglas Ward）开发，是“用于设计HTML5 SVG艺术和动画的开源Mac OS应用”。

我对使用MacSVG创建动画签名很感兴趣。 我承认我发现该过程有些混乱，并且在我第一次尝试创建实际的动画SVG图像时失败了。

首先要了解什么使“墙上的文字”实际书写很重要。

动画作品背后的属性是stroke-dasharray 。 将术语分为三个词可帮助解释正在发生的情况： 笔划是指您用笔（无论是物理的还是数字的）将要画的线或笔划。 短划线表示将笔划分解为一系列短划线。 数组意味着将整个事物生成一个数组。 这是一个简单的概述，但是它帮助我了解了应该发生的事情以及原因。

使用MacSVG，您可以导入图形（.PNG）并使用钢笔工具来跟踪书写路径。 我用草写的名字表示。 然后，只需应用属性为笔迹设置动画，增加或减少笔触的粗细，更改其颜色等等。 完成后，动画作品将导出为.SVG文件，并准备在网络上使用。 除了手写以外，MacSVG还可以用于许多不同类型的SVG动画。

文字在WordPress上

我已经准备好在WordPress网站上上传和共享SVG示例，但是我发现WordPress不允许SVG媒体导入。 幸运的是，我找到了一个方便的插件：Benbodhi的SVG支持使我可以像导入JPG到我的媒体库一样快速，轻松地导入我的SVG。 我能够在墙上向世界各地的巴比伦人展示我的作品 。

我在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用于什么？

翻译自: https://opensource.com/article/18/10/macsvg-open-source-tool-animation

可缩放矢量地图