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的前端 ㅠㅠ)