前言
最近看到一个案例,初看的时候对产品经理说很简单,是一个长页面,底图上有按钮,按了之后有素材动效,这对于前端来说是最基础的功能。后来定睛一看发现,还有微信阅读数和评论,发现事情并不简单。整个交互层全都在公众号文章里,这可是新鲜,翻了一下评论发现有不少同行在问是如何实现的,结果作者很得意地笑而不答,直到看到有人提到svg。有关键字就好办了,上网一查确实是黑科技,利用了微信文章富文本编辑的一个——漏洞?亲自上手之后发现确实可行,写一个简单的教程希望对大家有所帮助。
准备工作
- 大家要有订阅号或服务号,能正常发送公众号文章;
- 在线svg编辑工具、html编辑器,在做正式推送的时候方便调试;
- 背景图片,推荐实际像素在640px+,其作用是设置svg的css->background。
编写svg
svg标签最外层如下:
<svg style="display: inline-block;width: 100%;background-image:url("https://mmbiz.qpic.cn/mmbiz_jpg/3ncjibLbkcT5B5AVicjgw06P2biaywPFGEGOiaHao8M8dXByoZULpicK9w0ctICMiak5AzsKB5qCcVw2hicS51NPkUIhA/640?wx_fmt=jpeg");background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
</svg>
这里要注意的是必须使用微信素材库内的图片,因此需要事先将背景图存入素材库。微信素材库内的图片不可在外部引用,因此直接在外部编辑器打开这个svg是无法正常显示背景图的,不过不用担心,最终在微信渲染的版本会正常显示
还有一个要点就是viewBox
这个属性,对svg舞台有了解的同学应该知道这个viewBox的具体工作原理,viewBox="x,y,width,height"
x和y控制svg元素内的基准点,width和height控制viewBox的分辨率,svg的实际宽高需要在style属性内设置。
接着使用g标签控制svg内的分组:
<svg 属性省略>
<g transform="translate(200,220)" style="opacity:0.1"></g>
</svg>
<g>
标签中控制transform需要用专门的transform属性,否则svg的动画无法正常运作,这里设置了css的透明度,是为了之后展示animate
和animateTransform
用法的区别。
接着添加内部的svg,通常使用<path>
标签,其中的d
属性表示绘制路径,这里涉及起始点、结束点、直线点、贝塞尔曲线中间点等信息,手绘难度很大,所以切图时建议切成svg格式并导出,把绘制路径复制到属性内就可以了,目前的svg如下:
<svg 属性省略>
<g transform