公众号文章里使用svg进行交互

前言

最近看到一个案例,初看的时候对产品经理说很简单,是一个长页面,底图上有按钮,按了之后有素材动效,这对于前端来说是最基础的功能。后来定睛一看发现,还有微信阅读数和评论,发现事情并不简单。整个交互层全都在公众号文章里,这可是新鲜,翻了一下评论发现有不少同行在问是如何实现的,结果作者很得意地笑而不答,直到看到有人提到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的透明度,是为了之后展示animateanimateTransform用法的区别。

接着添加内部的svg,通常使用<path>标签,其中的d属性表示绘制路径,这里涉及起始点、结束点、直线点、贝塞尔曲线中间点等信息,手绘难度很大,所以切图时建议切成svg格式并导出,把绘制路径复制到属性内就可以了,目前的svg如下:

<svg 属性省略>
<g transform
  • 12
    点赞
  • 49
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值