
SVG 可以在公众号推文中实现简单的交互,某种程度上替代了 H5 的部分功能。《人民日报》推出的「点亮武汉」互动方式引起了很大反响,中秋节快到了,不妨模仿这种方式,让我们用 SVG 点亮月亮。
以「秀米」编辑器为例,准备两张图片:一张彩色图片和由它生成的灰度图,导入到秀米中。
1、新建图文,插入布局-SVG 布局-基础布局,点击基础布局外面的方框并选择「动画」;

2、将预先准备好的灰度图插入布局中;将彩色图片插入 SVG 层,确保「动画类别」为「淡入」,其它参数不用修改即可实现点亮月亮的效果(这里更改了背景颜色);

3、预览一下。

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