1. 首页
  2. 开发

snapsvg源码解读-Snap.load加载svg

    本来是在工作中遇到了一点小麻烦,结果恰好有了这么个机会于是就有了下面这段文章。

     起因:因为在ie8中直接加载不了svg文件,我开始是直接用ie8下打开html通过snapsvg来加载svg,结果出师未捷身先死啊,居然snapsvg的js报错了,在网上查了下,原来是snapsvg为了忽略兼容性的问题,直接放弃了较低版本的浏览器,所以在snapsvg的js文件加载的时候报错了,具体错误在哪暂时还没研究。

    于是我就开始在网上试图找个能代替它并且还能兼容ie8的js库,几番寻找,只找到一些能兼容ie8(基本都是实现了ie下vml的方式)的js库,但是都是主动通过代码产生svg的。

    那么问题来了…不是挖掘机…

    如果我要用别的库来操作的话,我该怎么加载进去?

    这样的情况下,我在翻snapsvg的下载的文件夹里时,看到有个src,打开里头有一些js文件,于是我想到我们在加载的时候用到了load方法。

    看到有个svg.js文件

    然后我就打开搜Snap.load,果然,找到了它的源码实现部分:

    2587行

    

/*\
 * Snap.load
 [ method ]
 **
 * Loads external SVG file as a @Fragment (see @Snap.ajax for more advanced AJAX)
 **
 - url (string) URL
 - callback (function) callback
 - scope (object) #optional scope of callback
\*/
Snap.load = function (url, callback, scope) {
    Snap.ajax(url, function (req) {
        var f = Snap.parse(req.responseText);
        scope ? callback.call(scope, f) : callback(f);
    });
};

    我们注意到,其中有个Snap.ajax  ,看到这里我们瞬间明白了,它还是通过ajax来请求这个svg的,然后将返回的字符传给了Snap.parse,parse摆明了就是要解析。

    那么我们再往下找Snap.parse方法:

    就在2270行

    

/*\
 * Snap.parse
 [ method ]
 **
 * Parses SVG fragment and converts it into a @Fragment
 **
 - svg (string) SVG string
 = (Fragment) the @Fragment
\*/
Snap.parse = function (svg) {
    var f = glob.doc.createDocumentFragment(),
        full = true,
        div = glob.doc.createElement("div");
    svg = Str(svg);
    if (!svg.match(/^\s*<\s*svg(?:\s|>)/)) {
        svg = "<svg>" + svg + "</svg>";
        full = false;
    }
    div.innerHTML = svg;
    svg = div.getElementsByTagName("svg")[0];
    if (svg) {
        if (full) {
            f = svg;
        } else {
            while (svg.firstChild) {
                f.appendChild(svg.firstChild);
            }
        }
    }
    div.innerHTML = E;
    return new Fragment(f);
};

     这一段看下来,我们知道了,他传过来的估计就是通过get请求请求过来的svg的字符串了,并且他创建了一个div将这段svg代码以html代码性质插入到了div中,然后再获取了svg的DOM对象添加到了他自己封装的对象中。

    看到这里虽然我的ie8问题没解决,但是至少我们知道了他加载svg的原理,也许我们以后需要自己实现的时候就游刃有余了。

    

收藏

暂无评论

登录后可以进行评论。没有账号?马上注册