微信公众号css布局和SVG推文的一些坑

因为公众号网页的限制，不能写js，不能写css，只能在html标签里写内联样式，但是常常有需求要在推文上做一些交互和动画，这时候就需要SVG。

但是SVG在公众号上也有很多坑，总结一下遇到的一些坑，也有一些公众号其他的坑。

1，css的position属性全部失效，把代码上传到公众号之后，它会把position属性的代码删掉，所以公众号的布局不能用定位

 

2，ID全部失效，把代码上传到公众号之后，它会把ID删掉，包括写在HTML标签上的ID，还有SVG标签里面的ID

 

3，css的transform属性全部失效，把代码上传到公众号之后，它会把transform属性的代码删掉，(经测试现在的transform属性可以正常用了)，SVG相关标签的transform属性有效，例如 <g transform="translate(10 10)"></g> 这样写是有效的

 

4，svg 里面不能嵌套 svg , 不能嵌套 image 标签, 经测试现在可以嵌套image标签了，但是href属性即图片的链接必须是素材库里的图片链接，外链或者base64均无法显示，如果是页面里普通的img标签则没有这个限制，width和height必须要写，不然在IOS上显示不了图片。

 

5，svg 尽量不要用渐变的颜色，因为代码会很多，体积太大，这个要跟设计师沟通

 

6，svg 相当于一张图了，全部放进去会文件体积很大，可以先压缩一下，在线SVG压缩：https://www.zhangxinxu.com/sp/svgo/

 

7，设计图 在使用AI设计时候，并不能使用复合路径、第二不能有任何超出画板外的元素在，第三文字使用扩展变为路径使用，并不能使用栅格化

 

8，IOS 上svg 动画的restart="never"没效，就是在苹果手机上再次点击的话，动画还是会执行，安卓没事，只做一次性的动画效果的话要留意下，目前无解，有解决方法欢迎留言。

 

9，在公众号上是没办法通过媒体查询做屏幕适应的，所以遇到需要适应的元素，可以灵活使用VW或者VH作为单位来做适应

 

10，有的推文的交互一块内容然后向左滑动，但是之前遇到了要求向右滑动的，因为css横向滚动的容器默认滚动条是最左的，只能向左滑，如果想要右滑，我们需要在滚动的容器上加上dir="rtl"这个属性就行。这个属性原本用来规定文本的排列方向，用了这个属性文本就可以从右往左排，但是用在滚动容器上的时候，它就可以令滚动条一开始默认在最右，这样就可以一进来是往右滑的。（注意这个属性只适用于横向的排列和滚动，垂直方向是没效的）

 

11，做点击展开长图文，长图文里的元素不能有用float属性的，因为用了这个属性对应的元素会脱离文档流，在height为0的容器中也会显示出来，导致无法隐藏长图文。

 

12，在<g>标签里用style写内联样式，安卓跟PC端是有效的，在IOS上是失效的。例如我做一个旋转的动画，SVG是默认原点在左上角的，这时我们可以这样写<g style="transform-origin:50% 50%"></g>，这个g标签就会以中心为原点旋转，但是放到公众号推文上的时候，在IOS系统下<g style="transform-origin:50% 50%"></g>是不起作用的，它仍然以左上角为原点。做相关动画的时候要留意。

 

13，<svg>里可以通过<foreignObject>标签来嵌套其他的HTML元素，包括SVG，例如点击svg播放动效的时候同时播放音乐，先将音乐上传到公众号，再将代码复制过来，放到svg里用<foreignObject>包住，这样点击播放音乐的同时就会触发外层的SVG动画。

 

14，点击SVG后从头播放动图，需要先将动图放到页面之外，可以通过位移，点击触发之后再将动图移进来显示就可以从头播放动图，如果一进来就将动图显示在页面，他就会一直循环播放。

 

15，做点击展开长图文，可以将宽度写成固定值，现在大屏手机偏多，我一般写360，这样在各种手机看起来高度就会一样，宽度的话在更大屏的手机上居中就行。

 

 

 P.S.：

· 单位不能用百分比。例如transform:translateY(-100%) ; margin-top:-100%; 在公众号上会失效，建议用px或者vw/vh

· pointer-events:none; 这个属性可以让所有交互事件失效,在一些场景会需要，可自行探索