浅谈微信公众号使用svg代码的坑


在首次了解到公众号文章可以使用svg代码时,以为实现各种交互都是易如反掌了,直到在浏览器调试svg没有问题,放到公众号上各种无效,查阅了相关的资料才明白。

属性无效问题

id和name全部无效,把代码上传到公众号之后,它会把id跟name删掉,包括HTML标签上的ID、SVG里的ID。也就是说,如果想要通过name来串联动画是无法实现的。更多无效的属性如下图。(图源自:计育韬)

此外,css的position属性也是无效的,上传之后属性会被抹掉。

白缝问题

有时候图片与图片之间会存在这样一条缝隙(深色模式下比较明显),在不同设备上大小还不一,可以给元素添加margin-top:-1px来微调

<section style="margin-top: -1px;"></section>

兼容问题

IOS 上svg 动画的restart=”never”无效,也就是在再次点击动画还是会触发


发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注