如何使用SVG與咕嚕咕嚕和玉

Question

我爲我的項目使用svg文件，我喜歡讓他們'在線'在HTML中，以便我可以使用CSS/JS來擺弄他們。

我有2個問題，這種方法：

• 我使用的玉模板引擎，所以我加入他們
• 它確實打亂了我的玉文件中添加了很多之前的XML玉轉換XML代碼

到目前爲止，我載入我的SVG圖標的方法如下：我把它們放在一個assets文件夾和玉加載它們像這樣：

  div 
      img(src='/assets/svg/my_icon.svg') 

但是在這裏，我不能使用js/css來設計它們。

有什麼辦法，例如使用Grunt來查找我的資產文件夾，抓住XML並填充我的HTML代碼？

Answer 1

我的這種方法是使用grunt-svgstore以下設置在Gruntfile.js

svgstore: { 
    default:{ 
    options: { 
     prefix : 'icon-', // This will prefix each ID, 
     svg: { // will add and overide the the default xmlns="http://www.w3.org/2000/svg" attribute to the resulting SVG 
     viewBox : '0 0 100 100', 
     xmlns: 'http://www.w3.org/2000/svg' 
     } 
    }, 
    files: { 
     "<%= folders.src %>/jade/_svgDef.jade": ["<%= folders.src %>/svg/*.svg"] 
    } 
    } 
} 

注意：我編譯我的所有文件夾中的SVGs直接進入一個玉文件，我包括我的layout.jade像這樣：

.svgdef(style="display:none;") 
    include _svgDef 

對於任何SVG，咕嚕，svgstore創建漂亮的ID爲您包括：

svg(viewBox="0 0 100 100", xmlns="http://www.w3.org/2000/svg") 
    use(xlink:href="#icon-Twitter") 

這很酷，因爲現在你可以在CSS中設置這個SVG的樣式，同時保持你編輯後的jade文件免於混亂！