SVG图片文件转换成Inline Code 的非完美解决方案

svg图片能够用css代码控制其样式, 但做为图片导入的时候css不起做用, 这时候能够用这种办法.

SVG图片文件转换成Inline Code

使用svg图片的好处不少, 其中由于svg图片自己就是有代码构成的矢量图片, 代码是Marked Language, 因此css能够对其进行修饰. 也就是说可以对svg图片的元素进行动态的样式变换.
但在网页中使用svg资源的时候是按图片导入, css代码不会适用到图片内部的代码里, 想要让样式起做用咱们要将svg的代码暴露出来.

svg2inline: ->
      jQuery('img.svg').each ->
        $img = jQuery(this)
        imgID = $img.attr('id')
        imgClass = $img.attr('class')
        imgURL = $img.attr('src')
        jQuery.get(imgURL,
          (data) =>
            $svg = jQuery(data).find('svg')
            $svg = $svg.attr('id', imgID) if typeof imgID != undefined
            $svg = $svg.attr('class', imgClass + ' replaced-svg') if typeof imgClass != undefined
            $svg = $svg.removeAttr('xmlns:a')
            $img.replaceWith($svg)
        , 'xml')

在页面导入以前定义svg2inline, 在使用svg格式图片的时候在<img> 加上svg类名,
以后再页面渲染以后呼出一次, 页面中的svg图片就都渲染为代码了.

这个方式的最大问题在于,她会对网页中全部的对应图片地址从新要求一次图片, 对与svg内容多的网页会有必定的资源消耗, 效率不高.
只适用于使用若干图片的首页之类.
对列表中使用的svg icon之类的状况,会很浪费
浏览器请求图片的时候都会放到缓存里,有重复的图片就直接调用缓存, 但这个方法则会每次都发送请求. 列表中的icon之类的使用这个方法将会是个噩梦...

注1

由于我使用CoffeeScript, 因此语法看起来会很怪.

svg2inline = function(){
     jQuery('.img.svg').each( function() {
        var $img = jQuery(this);
        var imgID = $img.attr('id');
        var imgClass = $img.attr('class');
        var imgURL = $img.attr('src');
        jQuery.get(imgURL, function(data){
            var $svg = jQuery(data).find('svg');
            if(typeof(imgID) != undefined){
                $svg = $svg.attr('id', imgID);
            }
            if (typeof(imgClass) != undefined){
                $svg = $svg.attr('class', imgClass+' replaced-svg');
            }
            $svg = $svg.removeAttr('smlns:a')
            $img.replaceWith($svg)
        });
    });
 }

好了, 我尝试转成了JS, 过久没用, 又是盲打, 但愿没有写错...(请叫我不会用JS的前端 ㅠㅠ)