SVG图片在WEB上有很多优势，非常小的体积，颜色可设置，内容对人还是算友好。最近遇到一个需求，就是动态改变SVG的颜色。这样<img src="logo.svg" />这样的写法很难实现这种能。查询了很多方案，但都感觉很复杂。

最终我决定是用Vue组件化来实现这个功能。SVG直接嵌入HTML，组件颜色从父组件传入。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
    <title>Page 1</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="山脉圈" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      ...
    </g>
  </svg>
</template>
<script>
  module.exports = {
    props: ['mainColor']
  }
</script>

使用的时候直接<component main-color="#ffffff"></component>即可。