「公众号交互还可以这么玩」Ⅰ:初识SVG

SVG可以在公众号推文中实现简单的交互,某种程度上替代了H5的部分功能。《人民日报》推出的「点亮武汉」互动方式引起了很大反响,中秋节快到了,不妨模仿这种方式,让我们用SVG点亮月亮。


以「秀米」编辑器为例,准备两张图片:一张彩色图片和由它生成的灰度图,导入到秀米中。


1、新建图文,插入布局-SVG布局-基础布局,点击基础布局外面的方框并选择「动画」;


2、插入预先准备好的两张图片,参数基本可以不用修改即可实现点亮月亮的效果(这里只更改了背景颜色);

3、预览一下。

在这个案例中,为了实现一个简单的效果,我们用了第三方编辑器提供的SVG模板。如果要实现的效果很复杂,模板可能就满足不了我们的需求,所以很有必要了解SVG的编写,下一节课我将给大家讲讲SVG包含的元素。

你有话要说?