從外部svg着色路徑

我正在尋找一種方法來從外部文件顏色svg路徑，發現this tutorial from Drew Baker。但它似乎不適合我。從外部svg着色路徑

這是我的文件，怎麼看起來像：

<html> 
<head> 
    <meta http-equiv="Content-Style-Type" content="text/css"> 
    <meta http-equiv="Content-Script-Type" content="text/javascript"> 
    <title>SVG test</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <style type="text/css"> 
     #icon { 
      width: 500px; 
      height: 500px; 
      position: absolute; 
      overflow: visible; 
     } 
      #icon #svg_container { 
       top: -000%; 
       width: 100%; 
       height: 100%; 
       position: absolute; 
      } 
       #icon #svg_container path { 
        fill: blue; 
       } 
    </style> 
    <script> 
     $("img.svg").each(function() { 
      var $img = $(this), 
      imgID = $img.attr("id"), 
      imgClass = $img.attr("class"), 
      imgURL = $img.attr("src"); 
      console.info(imgID + ", " + imgClass + ", " + imgURL); 

      $.get(imgURL, function (data) { 
       // Get the SVG tag, ignore the rest 
       var $svg = $(data).find("svg"); 
       // Add replaced image’s ID to the new SVG 
       if (typeof imgID !== "undefined") { 
        $svg = $svg.attr("id", imgID); 
       } 
       // Add replaced image’s classes to the new SVG 
       if (typeof imgClass !== "undefined") { 
        $svg = $svg.attr("class", imgClass + " replaced-svg"); 
       } 
       // Remove any invalid XML tags as per http://validator.w3.org 
       $svg = $svg.removeAttr("xmlns:a"); 
       // Replace image with new SVG 
       $img.replaceWith($svg); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div id="icon"> 
     <img src="svg-sprite.svg" class="svg" id="svg_container" /> 
    </div> 
</body> 
</html>

的SVG文件包含類似路徑。

你能發現一個錯誤或者這個方法是否被簡單地棄用？我可以在這裏需要一隻手...先謝謝了！

來源

2014-09-26 Yannic Welle

我能夠在代碼筆中得到這個工作，我唯一編輯的是找到另一個svg來加載，因爲你沒有提供並調整風格到我使用的圖像。

http://codepen.io/justindunham/pen/yafsI

<div id="icon"> 
    <img src="svg-sprite.svg" class="svg" id="svg_container" /> 
</div> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script> 
    $("img.svg").each(function() 
    { 
     var $img = $(this), 
     imgID = $img.attr("id"), 
     imgClass = $img.attr("class"), 
     imgURL = $img.attr("src"); 

     console.info(imgID + ", " + imgClass + ", " + imgURL); 

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

      // Add replaced image’s ID to the new SVG 
      if(typeof imgID !== "undefined") 
      { 
       $svg = $svg.attr("id", imgID); 
      } 
      // Add replaced image’s classes to the new SVG 
      if(typeof imgClass !== "undefined") 
      { 
       $svg = $svg.attr("class", imgClass+" replaced-svg"); 
      } 

      // Remove any invalid XML tags as per http://validator.w3.org 
      $svg = $svg.removeAttr("xmlns:a"); 

      // Replace image with new SVG 
      $img.replaceWith($svg); 
     }); 
    }); 
</script>

你可能要重新爲了你的腳本是在你的頁面的底部。如果您仍然有問題，請發佈您的svg代碼。

來源

2014-09-26 13:15:45 jdunham

yey多數民衆贊成在它！坐在標題中的腳本是問題...謝謝:)並祝你週末愉快！ – 2014-09-26 13:36:40

從外部svg着色路徑

回答

相關問題