我使用snap.svg写了一个页面,页面包含一个很简单的svg,代码大致如下://Simpledashedpatternoncirclevars=Snap("#svg");//Thiswillbeourshape.Itcouldbeanything.varbigCircle=s.circle(150,150,100);bigCircle.attr({stroke:"#000",strokeWidth:5});我在华为c8815手机上做测试,安卓版本为4.1.2,或许是不支持SVG,所以页面上没有正常显示图形,而是提示CreatedwithSnap不兼容是正常的,但是我却发现有一个页面在这个手机上却是兼容的,地址是:http://fang.youku.com/2014/timet这个页面是增加了什么插件,还是使用了什么方法,可以是svg在这个测试的机型上兼容。测试机型:华为c8815,安卓版本为4.1.2,浏览器为微信6.0安卓版内置浏览器、系统内置浏览器,qq浏览器(不兼容)=======================================华丽丽分割线====================================/*update2015-01-2114:45*/恩用了纯正的svg写了,再测试的时候,发现正常的的确在测试机型的微信浏览器是可行的。然后测试了animateTransform也都是可以的。但是当我测试用css3结合做素描动画的时候这个测试机型就不能兼容了。测试代码如下:#line{stroke-dasharray:100;stroke-dashoffset:100;-webkit-animation:dash3sease-in-out;animation:dash3sease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both;}@-webkit-keyframesdash{to{stroke:#f00;stroke-dashoffset:0;}}@keyframesdash{to{stroke:#f00;stroke-dashoffset:0;}}=======================================华丽丽分割线==================================/*update2015-01-21更新,使用snap库可以兼容以上测试机型*/完整测试代码如下:vars=Snap("#svg");varline=s.select('#line');varlinelen=line.getTotalLength();line.attr({strokeDasharray:linelen,strokeDashoffset:linelen});line.animate({strokeDashoffset:0},3e3);这段代码测试,使用snap的animate方法来写的动画,在测试机型上已经兼容。所以应该是css3方式去写的会有兼容性的问题。如果有人测试有问题的话,欢迎补充反馈~!!!
添加回答
举报
0/150
提交
取消