經過javascript腳本後，Chrome瀏覽器中沒有顯示SVG圖像

Question

我的頁面上有一個粘滯頁腳，但是如果啓用JavaScript以確保SVG圖像在懸停時變色，則SVG文件不會顯示在Chrome中。刪除javascript會導致Chrome加載圖像。

我無法重新創建的jsfiddle的效果，但這裏的代碼： https://jsfiddle.net/r9szd060/

這是JavaScript代碼：

$(document).ready(function() { 
    $('img[src$=".svg"]').each(function() { 
     var $img = jQuery(this); 
     var imgURL = $img.attr('src'); 
     var attributes = $img.prop("attributes"); 

     $.get(imgURL, function (data) { 
      // Get the SVG tag, ignore the rest 
      var $svg = jQuery(data).find('svg'); 

      // Remove any invalid XML tags 
      $svg = $svg.removeAttr('xmlns:a'); 

      // Loop through IMG attributes and apply on SVG 
      $.each(attributes, function() { 
       $svg.attr(this.name, this.value); 
      }); 

      // Replace IMG with SVG 
      $img.replaceWith($svg); 
     }, 'xml'); 
    }); 
}); 

我使用嵌入標籤，而不是試圖img標籤，但不會改變chrome中的行爲。 Firefox（桌面+ iOS + Android）可以很好地處理SVG圖像，就像Safari（桌面+ iOS）一樣。 SVG圖像在桌面上的Chrome和Android上的Chrome上消失。奇怪的是，在iOS上的鉻確實工作...

我認爲這與SVG通過JavaScript處理的方式以及SVG如何保存有關，但是我不太熟悉javascript來拾取在問題上。我讀過chrome，有時候SVG文件存在一些問題？我不知道如何上傳SVG文件，以便你可以看到，但是如果有人能告訴我如何傳遞相關信息（例如，在Illustrator中打開的文件），我將把它添加到這篇文章:) 。

有誰知道這個問題是什麼以及我如何解決它？

Answer 1

你不能使用CSS來設計任何SVG，你必須在它上面設置一個屬性，寬度。這就是爲什麼你沒有看到他們在頁面上，每個SVG把他的真實大小（大約600像素）。

$(document).ready(function() { 
    $('img[src$=".svg"]').each(function() { 
     var $img = jQuery(this); 
     var imgURL = $img.attr('src'); 
     var attributes = $img.prop("attributes"); 

     $.get(imgURL, function (data) { 
      // Get the SVG tag, ignore the rest 
      var $svg = jQuery(data).find('svg'); 

      // Remove any invalid XML tags 
      $svg = $svg.removeAttr('xmlns:a'); 

      // Loop through IMG attributes and apply on SVG 
      $.each(attributes, function() { 
       $svg.attr(this.name, this.value); 
      }); 

      //Add width on newly created svg 
      $svg.attr('width', '30'); 

      // Replace IMG with SVG 
      $img.replaceWith($svg); 
     }, 'xml'); 
    }); 
});