如何使用SVG与咕噜咕噜和玉

2014-10-22 121 views 0 likes

我为我的项目使用svg文件，我喜欢让他们'在线'在HTML中，以便我可以使用CSS/JS来摆弄他们。如何使用SVG与咕噜咕噜和玉

我有2个问题，这种方法：

我使用的玉模板引擎，所以我加入他们
它确实打乱了我的玉文件中添加了很多之前的XML玉转换XML代码

到目前为止，我载入我的SVG图标的方法如下：我把它们放在一个assets文件夹和玉加载它们像这样：

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

但是在这里，我不能使用js/css来设计它们。

有什么办法，例如使用Grunt来查找我的资产文件夹，抓住XML并填充我的HTML代码？

来源

2014-10-22 Spearfisher

我不知道Jade，但是你可以在SVG中包含CSS/JS吗？ – Ian 2014-10-22 10:12:51

回答

我的这种方法是使用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文件免于混乱！

来源

2015-01-12 13:56:30 kadrian

如何使用SVG与咕噜咕噜和玉

回答

相关问题