了解SVG_微信公众号svg交互动画海报制作教程（一）

网上关于微信公众号svg相关的资料比较少，所以永易搜建站就想着补充一下这方面的教程资料。这次就分篇章，用实例来教大家怎么做SVG教程。

第一步，当然就是了解SVG。

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。他是使用 XML格式定义图像，所以是把一个图形写成了xml代码供大家使用。

不同于传统图片的是，它可以设置一些动画，还可以在动画上添加点击事件。这是我们做svg交互动画的意义。在微信公众号里，不能添加js，所以想要做交互，svg是唯一的选择。

svg可以是单独的文件，也可以是html中的代码，因为我们主要谈的是微信公众号中svg交互动画，所以直接只讲svg的html代码。

一、基础的svg代码是这样写的：

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

特征是：

1、用svg标签包裹

2、内部用各种标签来描绘适量图形，具体如下：

矩形<rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>

稍微延展一点，复杂一点的svg可以增加背景图、分组、动画、点击等：

<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
  <g style="transform: translate(120px, 560px);opacity: 0;">

    <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>

    <animate attributeName="opacity" begin="click+0.5" dur="0.1s" values="0;1" fill="freeze" restart="never"></animate>
    </g>
</svg>

（代码并不严谨，只是为了说明意思）

因为这些代码里边没有用到js，又实现了点击交互。所以可以用于微信公众号文章里。