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