html svg兼容性,如何处理SVG的移动端的兼容性问题

我使用snap.svg写了一个页面,页面包含一个很简单的svg,代码大致如下:

// Simple dashed pattern on circle

var s = Snap("#svg");

// This will be our shape. It could be anything.

var bigCircle = s.circle(150, 150, 100);

bigCircle.attr({

stroke: "#000",

strokeWidth: 5

});

我在华为c8815手机上做测试,安卓版本为4.1.2,或许是不支持SVG,所以页面上没有正常显示图形,而是提示

Created with Snap

不兼容是正常的,但是我却发现有一个页面在这个手机上却是兼容的,

地址是:http://fang.youku.com/2014/timet

这个页面是增加了什么插件,还是使用了什么方法,可以是svg在这个测试的机型上兼容。

测试机型:华为c8815,安卓版本为4.1.2,浏览器为微信6.0安卓版内置浏览器、系统内置浏览器,qq浏览器(不兼容)

=======================================华丽丽分割线====================================

/* update 2015-01-21 14:45 */

恩 用了纯正的svg写了,再测试的时候,发现正常的的确在测试机型的微信浏览器是可行的。然后测试了animateTransform也都是可以的。但是当我测试用css3结合做素描动画的时候这个测试机型就不能兼容了。

测试代码如下:

#line {

stroke-dasharray:100;

stroke-dashoffset:100;

-webkit-animation: dash 3s ease-in-out;

animation: dash 3s ease-in-out;

-webkit-animation-fill-mode:both;

animation-fill-mode:both;

}

@-webkit-keyframes dash {

to {

stroke:#f00;

stroke-dashoffset: 0;

}

}

@keyframes dash {

to {

stroke:#f00;

stroke-dashoffset: 0;

}

}

=======================================华丽丽分割线==================================

/* update 2015-01-21 更新,使用snap库可以兼容以上测试机型*/

完整 测试代码如下:

var s = Snap("#svg");

var line = s.select('#line');

var linelen = line.getTotalLength();

line.attr({

strokeDasharray:linelen,

strokeDashoffset:linelen

});

line.animate({strokeDashoffset:0},3e3);

这段代码测试,使用snap的animate方法来写的动画,在测试机型上已经兼容。所以应该是css3方式去写的会有兼容性的问题。如果有人测试有问题的话,欢迎补充反馈~!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值