当前位置:首页 > 技术方案 > 详情

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

发布时间:2021-08-27   浏览次数:10次   作者:admin    标签:郑州seo 郑州seo推广 郑州网站推广

网上关于微信公众号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,又实现了点击交互。所以可以用于微信公众号文章里。