安卓机微信上的animation和svg的兼容处理

我的目的是让一个元素旋转,以下2种尝试在安卓的微信浏览器中都有不兼容的问题,求解决思路。
尝试1: animation

#query .body .tip .loading{
  width: 70px;
  margin-top:39px;
  margin-bottom: 20px;
  -webkit-animation: rotate 1.0s linear infinite;
  animation: rotate 1.0s linear infinite;
}
@keyframes rotate{
  from{-webkit-transform:rotate(0deg)}
  to{-webkit-transform:rotate(360deg)}
}

现象:图片描述

有图片,但是是静态的。


尝试2: svg

<svg>
    <image class="loading" xlink:href="/image/loading.png" >
    <animateTransform attributeName="transform" 
                      attributeType="XML"
                      type="rotate" 
                      from="0 35 35" 
                      to=" 360 35 35" 
                      dur="2s"
                      repeatCount="indefinite"/>
    </image>
</svg> 

现象 图片描述,无图片。

以上2种方法在IOS 微信中OK。

阅读 2.9k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题