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

发布于 2022-08-31 20:30:11 字数 3507 浏览 27 评论 0

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

<svg id="svg" width="100%" height="900px"></svg>

<script type="text/javascript" src="snap.svg-min.js"></script>
<script type="text/javascript">
    // 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
    });

</script>

我在华为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结合做素描动画的时候这个测试机型就不能兼容了。

测试代码如下：

<style type="text/css"> 
        #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; 
            } 
        } 
    </style>

    <svg id="svg" width="100%" height="500px"  xmlns="http://www.w3.org/2000/svg">
        <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:none;stroke:black;stroke-width:5" id="line" />
    </svg>

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

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

完整测试代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

</head>
<body>

<svg id="svg" width="100%" height="500px" xmlns="http://www.w3.org/2000/svg">
    <path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274" style="fill:none;stroke:black;stroke-width:5" id="line" />
</svg>

<script type="text/javascript" src="snap.svg-min.js"></script>
<script type="text/javascript">
    var s = Snap("#svg");
    var line = s.select('#line');
    var linelen = line.getTotalLength();
    line.attr({
        strokeDasharray:linelen,
        strokeDashoffset:linelen
    });

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

</script> 
</body>
</html>

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情痴 2022-09-07 20:30:11

我想说，并不是 SVG 的错好么，要是真想测试兼容性的话就应该堂堂正正的直接写出 SVG 出来啊！

SVG 的兼容性可见 http://caniuse.com/#search=svg ，从上面可以看出，Android 4.1.2 版本虽然支持不完全，但是注中给出说明只是不太支持 mask ，你的这个简单测试应该是没问题的。

而元凶 Snap 的兼容性可见官方描述：

Currently, the most popular library for working with SVG is Raphaël. One of the primary reasons Raphaël became the de facto standard is that it supports browsers all the way back to IE 6. However, supporting so many browsers means only being able to implement a common subset of SVG features. Snap was written entirely from scratch by the author of Raphaël (Dmitry Baranovskiy), and is designed specifically for modern browsers (IE9 and up, Safari, Chrome, Firefox, and Opera). Targeting more modern browsers means that Snap can support features like masking, clipping, patterns, full gradients, groups, and more.
- http://snapsvg.io/about/

所以似乎你可能要换个库了？

回复收藏 0