如何在执行grunt-svgstore

时间:2016-03-08 09:19:02

标签: javascript svg svg-font grunt-svgstore

我正在使用grunt-svgstore任务来创建svg文件的合并版本。

问题陈述:
我在完成grunt后包含了svg文件 - svgstore任务。

我的解决方案
svg-sprite.svg

<svg style="display: none;">
  <symbol viewBox="0 0 30 30" id="icon_arrow-down"><title>arrow-down</title><polygon points="24.5,7.2 15.2,17.1 5.3,7.8 2.6,10.7 15.4,22.8 27.4,10 "/></symbol>
</svg>

的index.html

<link rel="import" id="svg-file" href="/images/svg-sprite.svg">

index.html的页脚部分

<script type="text/javascript">
  var content = document.querySelector('link[rel="import"]').import;
  var el = content.querySelector('svg');
  document.body.insertBefore(el.cloneNode(true), document.body.firstChild);
</script>

用法

<svg>
  <use xlink:href="#icon_arrow-down" />
</svg>

还有其他方法可以更有效地编写上面的代码吗?

0 个答案:

没有答案