微信公众号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; 这个属性可以让所有交互事件失效,在一些场景会需要，可自行探索

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

微信公众号中选择时间css,微信公众号到底应该几点推文？
原标题:微信公众号到底应该几点推文? 微信公众号到底应该几点推文? 早晨上班,中午休息,晚上睡觉前,都是好时间. 这些时间别说刚入行的小白知道,就连半只脚没踏进运营门槛的小灰都知道,再遵循这个规律发文 ...
微信公众号为指定openid用户推送消息
微信公众号为指定openid用户推送消息微信提供的开放接口中,有两个给指定openid的用户发送信息的接口,适用场景应该是向预约用户或者中奖用户发送消息. 第一个接口:客服发送消息请求方式: P ...
微信公众号（二）每日推送详细教程（AI回复助手）
微信公众号(二)每日推送详细教程(回复助手) 1.准备阶段 1.1 基础性配置 1.2 账号准备 2. 配置阶段 2.1 配置application.yml文件 2.2 注解 3. 部署效果图如下 ...
php公众号向多个用户推送消息,如何实现微信公众号给指定互动用户推送多次消息？...
1.微号帮平台注册账号.登录.授权公众号 2.创建推送信息进入功能管理后,找到高级功能,选择48小时信息推送,点击添加推送信息,支持微信公众号给指定互动用户推送多次消息. 3.微号帮平台:编辑推送消 ...
如何设置微信公众号粉丝关注后自动推送小程序
关于微信公众号粉丝关注后自动推送小程序实现,第三方工具微号帮提供了功能粉丝关注定时推送实现,支持微信公众号设置粉丝关注后自动推送小程序,小程序可以以卡片.链接的形式展现给关注粉丝;公众号设置关注推送小 ...
微信公众号如何无限制的定向推送消息--模板消息的应用
微信公众号如何无限制的定向推送消息–模板消息的应用最近开发的OA平台有一个需求:将待办消息推送到微信公众号的指定用户.但是为了避免用户受到垃圾消息的骚扰,微信对相关的接口做了非常严格的限制. 查阅开 ...
微信公众号（一）每日推送详细教程（含实时定位，天气预报，每日英语，纪念日等，可快速自定义消息模板并指定订阅者类型发送）
微信公众号(一)每日推送,天气推送 (含实时定位,天气预报,每日英语,纪念日等,可快速自定义消息模板并指定订阅者类型发送),另有小白网页版配置版本介绍 1. 相关API接口申请 1.1 微信 1.2 ...
微信公众号关注/取消关注事件推送开发记录
一.奉上官方文档关注/取消关注事件 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/doc/offiaccount/Message_Managem ...
通过企业微信或者微信公众号发送小程序消息推送功能
前言为了解决在管理员端可以主动发起某个指令,可以给用户推送小程序消息需求,共找出两个解决方案: 两个方案均已实现点击调转到对应小程序页面,同时可以主动多次进行发送(暂时公众号模板消息有条数限制). ...

微信公众号css布局和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> 这样写是有效的

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

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

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

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

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

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

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

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

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

最新文章

热门文章

微信公众号css布局和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> 这样写是有效的

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

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

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

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

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

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

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

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

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

最新文章

热门文章

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