微信小程序——关于同一个svg的颜色改变

逃离我推掉我的手 2023-10-13 20:36 147阅读 0赞

**目录**

一、问题的产生

二、问题的解决

三、总结

--------------------

相信小伙伴们在微信小程序开发之中使用svg的时候遇到过一个问题，同一个svg但是产品要求不同的状态有着不同的颜色，那么如果我们引入了太多的同一个类型的svg，对我们的内存又是一个极大的消耗，那么我们有没有什么办法将一个svg改变一下颜色呢？这样不就可以节省很多内存了，那么各位继续向下看吧。

## 一、问题的产生 ##

此问题出于产品提出的一个需求

![822dd5228a2f5a7c6cbb120f465d9ec8.png][]

在此处的建筑房子在浅色系的时候，颜色需要根据色卡的颜色来进行变换，但是由于浅色系的色卡过多，将所有颜色的建筑储存起来在调用会产生多余的很多代码，因为此处使用的是svg，确实可以显示颜色，但是并不能动态改变颜色呀！偶天哪。。。又但是，image的src支持base64，哎呀，这思路不就来了吗，既然你能base64，我还不能修改base64了？说干就干，那就来吧！

## 二、问题的解决 ##

开始之前，我们要先明白，svg是如何改变颜色的。

svg中有一个属性fill，这里就是用来填写svg的填充颜色的，支持十六进制，例如\#ff0000就是红色，也可以填写red，跟css差不多，明白这一点就可以进行接下来的操作了。

工厂函数代码： 实现思路就是将SVG的base64字符串解码之后得到svg代码，替换svg的fill属性来改变颜色，然后再Base64编码回去。

这里对转换之后的base64结果做一个说明，共分成三部分：

data:image/svg+xml;base64首部的这一串作为固定值，让image能够识别你给它的是什么东西，是一个图片、svg+xml格式的、经过了base64编码的，这个解释不是专业的哈，能看懂就行。

一个英文逗号，将前后隔离开。

逗号后面的就是svg代码base64编码之后得到的字符串，这就是我们可操作的字符串啦

由此这里我们需要四个东西进行辅助工作，两个工具类、一个组件以及一个js的静态文件（用来储存你需要改变颜色的base64的代码）

![e229c62092804d658624fa75e93a4916.png][]

在这里classSvg.js的作用是储存你需要改变颜色的svg的base64代码文件

export default {
      attachment: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNCAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuOTU2NjIgMS4wNzI2NkM3LjAxMDQ5IDEuMDcyNjYgNy4wNjM4NCAxLjA4MzI3IDcuMTEzNjIgMS4xMDM4OUM3LjE2MzM5IDEuMTI0NTEgNy4yMDg2MiAxLjE1NDczIDcuMjQ2NzEgMS4xOTI4MkM3LjI4NDgxIDEuMjMwOTIgNy4zMTUwMyAxLjI3NjE1IDcuMzM1NjUgMS4zMjU5MkM3LjM1NjI2IDEuMzc1NyA3LjM2Njg3IDEuNDI5MDQgNy4zNjY4NyAxLjQ4MjkyVjIuNjgwODdDNy4zOTY4MiAyLjY5NDgyIDcuNDI1OTUgMi43MTA4MiA3LjQ1NDI2IDIuNzI4NDZMNy41MTY2MiAyLjc3MDcxTDEwLjY1MzggNS4wODc4NEMxMC43NDA5IDUuMTUyMDcgMTAuODA2NCA1LjI0MTEzIDEwLjg0MTkgNS4zNDMzMUMxMC44NzczIDUuNDQ1NDkgMTAuODgxIDUuNTU2IDEwLjg1MjUgNS42NjAzMkMxMC44MjM5IDUuNzY0NjQgMTAuNzY0NSA1Ljg1Nzg4IDEwLjY4MTkgNS45Mjc3OEMxMC41OTk0IDUuOTk3NjggMTAuNDk3NiA2LjA0MDk2IDEwLjM5MDEgNi4wNTE5NEwxMC4zMzU1IDYuMDU0NDFIMTAuMTYxNUwxMC4xNjExIDYuNzM2NjZIMTMuMTI4MUMxMy4yMjg3IDYuNzM2NjkgMTMuMzI1NyA2Ljc3MzY0IDEzLjQwMDggNi44NDA0OUMxMy40NzU5IDYuOTA3MzUgMTMuNTIzOCA2Ljk5OTQ2IDEzLjUzNTUgNy4wOTkzM0wxMy41Mzg0IDcuMTQ2OTJDMTMuNTM4MyA3LjI0NzQgMTMuNTAxNSA3LjM0NDM5IDEzLjQzNDcgNy40MTk0OEMxMy4zNjc5IDcuNDk0NTcgMTMuMjc1OSA3LjU0MjU1IDEzLjE3NjEgNy41NTQzTDEzLjEyODEgNy41NTcxOEgxMi43ODQ3VjEyLjkyNDFDMTIuNzg0NyAxMi45NzggMTIuNzc0MSAxMy4wMzE0IDEyLjc1MzUgMTMuMDgxMUMxMi43MzI5IDEzLjEzMDkgMTIuNzAyNyAxMy4xNzYxIDEyLjY2NDYgMTMuMjE0MkMxMi42MjY1IDEzLjI1MjMgMTIuNTgxMiAxMy4yODI2IDEyLjUzMTUgMTMuMzAzMkMxMi40ODE3IDEzLjMyMzggMTIuNDI4MyAxMy4zMzQ0IDEyLjM3NDUgMTMuMzM0NEgxLjYyMDQxQzEuNTE5ODYgMTMuMzM0NCAxLjQyMjgzIDEzLjI5NzQgMS4zNDc3MyAxMy4yMzA2QzEuMjcyNjIgMTMuMTYzNyAxLjIyNDY5IDEzLjA3MTYgMS4yMTMwMyAxMi45NzE3TDEuMjEwMTYgMTIuOTI0MUwxLjIwOTc1IDcuNTU3MThIMC44MjA0MTNDMC43MTk5MjcgNy41NTcxNiAwLjYyMjk0MSA3LjUyMDI3IDAuNTQ3ODUgNy40NTM1QzAuNDcyNzU5IDcuMzg2NzIgMC40MjQ3ODUgNy4yOTQ3MSAwLjQxMzAyOCA3LjE5NDkyTDAuNDEwMTU2IDcuMTQ2OTJDMC40MTAxNyA3LjA0NjQzIDAuNDQ3MDYxIDYuOTQ5NDUgMC41MTM4MzQgNi44NzQzNkMwLjU4MDYwNyA2Ljc5OTI2IDAuNjcyNjE3IDYuNzUxMjkgMC43NzI0MTMgNi43Mzk1M0wwLjgyMDQxMyA2LjczNjY2SDMuODg3NDlWNi4wNTQ0MUgzLjcwNDUyQzMuNTk3MzggNi4wNTQzOCAzLjQ5MjcxIDYuMDIyMjMgMy40MDQwMyA1Ljk2MjEyQzMuMzE1MzUgNS45MDIwMSAzLjI0NjcyIDUuODE2NjkgMy4yMDcwMiA1LjcxNzE4QzMuMTY3MzEgNS42MTc2NyAzLjE1ODM1IDUuNTA4NTUgMy4xODEyOSA1LjQwMzlDMy4yMDQyMiA1LjI5OTI1IDMuMjU4MDEgNS4yMDM4OCAzLjMzNTY5IDUuMTMwMUwzLjM4MDQxIDUuMDkyMzVMNi40MjIwNSAyLjc3ODUxQzYuNDYxMjggMi43NDg2NyA2LjUwMjg1IDIuNzIyMDYgNi41NDYzNiAyLjY5ODkyVjEuODkzMThINC45MjI5OEM0LjgxNDE3IDEuODkzMTggNC43MDk4MiAxLjg0OTk1IDQuNjMyODggMS43NzMwMUM0LjU1NTk0IDEuNjk2MDggNC41MTI3MiAxLjU5MTczIDQuNTEyNzIgMS40ODI5MkM0LjUxMjcyIDEuMzc0MTEgNC41NTU5NCAxLjI2OTc2IDQuNjMyODggMS4xOTI4MkM0LjcwOTgyIDEuMTE1ODkgNC44MTQxNyAxLjA3MjY2IDQuOTIyOTggMS4wNzI2Nkg2Ljk1NjYyWk0xMS45NjQyIDcuNTU3MThIMTAuMTYxMVYxMi41MTM1SDExLjk2NDJWNy41NTc1OVY3LjU1NzE4Wk0zLjg4NzQ5IDcuNTU3MThIMi4wMjk4NUwyLjAzMDI2IDEyLjUxMzlMMy44ODc0OSAxMi41MTM1VjcuNTU3MThaTTYuOTM5OCAzLjQxOTMzTDYuOTE4ODcgMy40MzE2NEw0LjQ4NzY5IDUuMjgwNjZDNC41NDY0IDUuMzExMjQgNC41OTY4NCA1LjM1NTU2IDQuNjM0NyA1LjQwOTg2QzQuNjcyNTcgNS40NjQxNSA0LjY5NjczIDUuNTI2OCA0LjcwNTEzIDUuNTkyNDZMNC43MDggNS42NDQxNVYxMi41MTM5TDUuNTM4MzYgMTIuNTEzNVYxMC42NTAxTDUuNTQxNjQgMTAuNTcwMUM1LjU5MDg3IDkuODI2NzEgNi4yMTg1NyA5LjI0ODY2IDYuOTc0MjYgOS4yNDg2NkM3Ljc2NTIzIDkuMjQ4NjYgOC40MTAxNiA5Ljg4MDQ2IDguNDEwMTYgMTAuNjYzNlYxMi41MTM1SDkuMzQxMDNWNS42NDQ1NkM5LjM0MTAzIDUuNTEgOS40MDU4NSA1LjM5MDIgOS41MDYzNiA1LjMxNTUzTDkuNTQ1NzUgNS4yODk2OUw3LjAyOTIzIDMuNDMxMjNDNy4wMTY1NSAzLjQyMTgyIDcuMDAxNjcgMy40MTU4MyA2Ljk4NjAxIDMuNDEzODJDNi45NzAzNiAzLjQxMTgxIDYuOTU0NDQgMy40MTM4NSA2LjkzOTggMy40MTk3NFYzLjQxOTMzWk02Ljk3NDI2IDEwLjA2OTZDNi42NDc2OSAxMC4wNjk2IDYuMzgwNjIgMTAuMzE1NyA2LjM2MDkzIDEwLjYxMTFMNi4zNTg4NyAxMC42NjRWMTIuNTE0M0g3LjU4OTY0VjEwLjY2NEM3LjU4OTY0IDEwLjMzNzUgNy4zMTYgMTAuMDY5MiA2Ljk3NDI2IDEwLjA2OTJWMTAuMDY5NlpNNi4xNTM3NSA3LjIzOTY0SDcuNzk0NzdDNy44OTkzNCA3LjIzOTc1IDcuOTk5OTEgNy4yNzk3OSA4LjA3NTk1IDcuMzUxNTdDOC4xNTE5OCA3LjQyMzM2IDguMTk3NzQgNy41MjE0NiA4LjIwMzg3IDcuNjI1ODVDOC4yMSA3LjczMDI0IDguMTc2MDMgNy44MzMwMiA4LjEwODkyIDcuOTEzMjFDOC4wNDE4MSA3Ljk5MzM5IDcuOTQ2NjEgOC4wNDQ5MyA3Ljg0Mjc3IDguMDU3MjhMNy43OTQ3NyA4LjA1OTMzSDYuMTUzNzVDNi4wNDg1NCA4LjA2MDE2IDUuOTQ3MDQgOC4wMjA1NCA1Ljg3MDIxIDcuOTQ4NjdDNS43OTMzOSA3Ljg3Njc5IDUuNzQ3MTEgNy43NzgxNCA1Ljc0MDk1IDcuNjczMTJDNS43MzQ3OSA3LjU2ODA5IDUuNzY5MjEgNy40NjQ3MSA1LjgzNzEgNy4zODQzNEM1LjkwNDk5IDcuMzAzOTcgNi4wMDExNyA3LjI1Mjc2IDYuMTA1NzUgNy4yNDEyOEw2LjE1Mzc1IDcuMjM4ODJINy43OTQ3N0g2LjE1Mzc1VjcuMjM5NjRaTTcuNzk0NzcgNS40ODEyOEM3Ljg5OTM0IDUuNDgxMzkgNy45OTk5MSA1LjUyMTQzIDguMDc1OTUgNS41OTMyMkM4LjE1MTk4IDUuNjY1IDguMTk3NzQgNS43NjMxIDguMjAzODcgNS44Njc0OUM4LjIxIDUuOTcxODggOC4xNzYwMyA2LjA3NDY2IDguMTA4OTIgNi4xNTQ4NUM4LjA0MTgxIDYuMjM1MDQgNy45NDY2MSA2LjI4NjU3IDcuODQyNzcgNi4yOTg5Mkw3Ljc5NDc3IDYuMzAxNzlINi4xNTM3NUM2LjA0OTE4IDYuMzAxNjcgNS45NDg2IDYuMjYxNjMgNS44NzI1NyA2LjE4OTg1QzUuNzk2NTMgNi4xMTgwNyA1Ljc1MDc4IDYuMDE5OTYgNS43NDQ2NSA1LjkxNTU4QzUuNzM4NTIgNS44MTExOSA1Ljc3MjQ4IDUuNzA4NCA1LjgzOTYgNS42MjgyMkM1LjkwNjcxIDUuNTQ4MDMgNi4wMDE5MSA1LjQ5NjUgNi4xMDU3NSA1LjQ4NDE1TDYuMTUzNzUgNS40ODEyOEg3Ljc5NDc3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=='
        }

此处为Base64.js的代码文件（直接复制即可）

/**
     * Created by SLICE_30_K on 2017/5/22.
     *
     * 支持一般Base64的编码和解码
     * 支持符合RFC_4648标准中"URL and Filename Safe Alphabet"的URL安全Base64编解码
     * 支持中文字符的编解码(Unicode编码)
     */
    
    var BASE64_MAPPING = [
      'A',
      'B',
      'C',
      'D',
      'E',
      'F',
      'G',
      'H',
      'I',
      'J',
      'K',
      'L',
      'M',
      'N',
      'O',
      'P',
      'Q',
      'R',
      'S',
      'T',
      'U',
      'V',
      'W',
      'X',
      'Y',
      'Z',
      'a',
      'b',
      'c',
      'd',
      'e',
      'f',
      'g',
      'h',
      'i',
      'j',
      'k',
      'l',
      'm',
      'n',
      'o',
      'p',
      'q',
      'r',
      's',
      't',
      'u',
      'v',
      'w',
      'x',
      'y',
      'z',
      '0',
      '1',
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '+',
      '/'
    ];
    var URLSAFE_BASE64_MAPPING = [
      'A',
      'B',
      'C',
      'D',
      'E',
      'F',
      'G',
      'H',
      'I',
      'J',
      'K',
      'L',
      'M',
      'N',
      'O',
      'P',
      'Q',
      'R',
      'S',
      'T',
      'U',
      'V',
      'W',
      'X',
      'Y',
      'Z',
      'a',
      'b',
      'c',
      'd',
      'e',
      'f',
      'g',
      'h',
      'i',
      'j',
      'k',
      'l',
      'm',
      'n',
      'o',
      'p',
      'q',
      'r',
      's',
      't',
      'u',
      'v',
      'w',
      'x',
      'y',
      'z',
      '0',
      '1',
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '-',
      '_'
    ];
    
    var _toBinary = function (ascii) {
      var binary = [];
      while (ascii > 0) {
          var b = ascii % 2;
          ascii = Math.floor(ascii / 2);
          binary.push(b);
      }
      binary.reverse();
      return binary;
    };
    
    var _toDecimal = function (binary) {
      var dec = 0;
      var p = 0;
      for (var i = binary.length - 1; i >= 0; --i) {
          var b = binary[i];
          if (b == 1) {
              dec += Math.pow(2, p);
          }
          ++p;
      }
      return dec;
    };
    
    var _toUTF8Binary = function (c, binaryArray) {
      var mustLen = 8 - (c + 1) + (c - 1) * 6;
      var fatLen = binaryArray.length;
      var diff = mustLen - fatLen;
      while (--diff >= 0) {
          binaryArray.unshift(0);
      }
      var binary = [];
      var _c = c;
      while (--_c >= 0) {
          binary.push(1);
      }
      binary.push(0);
      var i = 0,
          len = 8 - (c + 1);
      for (; i < len; ++i) {
          binary.push(binaryArray[i]);
      }
    
      for (var j = 0; j < c - 1; ++j) {
          binary.push(1);
          binary.push(0);
          var sum = 6;
          while (--sum >= 0) {
              binary.push(binaryArray[i++]);
          }
      }
      return binary;
    };
    
    var _toBinaryArray = function (str) {
      var binaryArray = [];
      for (var i = 0, len = str.length; i < len; ++i) {
          var unicode = str.charCodeAt(i);
          var _tmpBinary = _toBinary(unicode);
          if (unicode < 0x80) {
              var _tmpdiff = 8 - _tmpBinary.length;
              while (--_tmpdiff >= 0) {
                  _tmpBinary.unshift(0);
              }
              binaryArray = binaryArray.concat(_tmpBinary);
          } else if (unicode >= 0x80 && unicode <= 0x7ff) {
              binaryArray = binaryArray.concat(_toUTF8Binary(2, _tmpBinary));
          } else if (unicode >= 0x800 && unicode <= 0xffff) {
              //UTF-8 3byte
              binaryArray = binaryArray.concat(_toUTF8Binary(3, _tmpBinary));
          } else if (unicode >= 0x10000 && unicode <= 0x1fffff) {
              //UTF-8 4byte
              binaryArray = binaryArray.concat(_toUTF8Binary(4, _tmpBinary));
          } else if (unicode >= 0x200000 && unicode <= 0x3ffffff) {
              //UTF-8 5byte
              binaryArray = binaryArray.concat(_toUTF8Binary(5, _tmpBinary));
          } else if (unicode >= 4000000 && unicode <= 0x7fffffff) {
              //UTF-8 6byte
              binaryArray = binaryArray.concat(_toUTF8Binary(6, _tmpBinary));
          }
      }
      return binaryArray;
    };
    
    var _toUnicodeStr = function (binaryArray) {
      var unicode;
      var unicodeBinary = [];
      var str = '';
      for (var i = 0, len = binaryArray.length; i < len;) {
          if (binaryArray[i] == 0) {
              unicode = _toDecimal(binaryArray.slice(i, i + 8));
              str += String.fromCharCode(unicode);
              i += 8;
          } else {
              var sum = 0;
              while (i < len) {
                  if (binaryArray[i] == 1) {
                      ++sum;
                  } else {
                      break;
                  }
                  ++i;
              }
              unicodeBinary = unicodeBinary.concat(binaryArray.slice(i + 1, i + 8 - sum));
              i += 8 - sum;
              while (sum > 1) {
                  unicodeBinary = unicodeBinary.concat(binaryArray.slice(i + 2, i + 8));
                  i += 8;
                  --sum;
              }
              unicode = _toDecimal(unicodeBinary);
              str += String.fromCharCode(unicode);
              unicodeBinary = [];
          }
      }
      return str;
    };
    
    var _encode = function (str, url_safe) {
      var base64_Index = [];
      var binaryArray = _toBinaryArray(str);
      var dictionary = url_safe ? URLSAFE_BASE64_MAPPING : BASE64_MAPPING;
    
      var extra_Zero_Count = 0;
      for (var i = 0, len = binaryArray.length; i < len; i += 6) {
          var diff = i + 6 - len;
          if (diff == 2) {
              extra_Zero_Count = 2;
          } else if (diff == 4) {
              extra_Zero_Count = 4;
          }
          var _tmpExtra_Zero_Count = extra_Zero_Count;
          while (--_tmpExtra_Zero_Count >= 0) {
              binaryArray.push(0);
          }
          base64_Index.push(_toDecimal(binaryArray.slice(i, i + 6)));
      }
    
      var base64 = '';
      for (var i = 0, len = base64_Index.length; i < len; ++i) {
          base64 += dictionary[base64_Index[i]];
      }
    
      for (var i = 0, len = extra_Zero_Count / 2; i < len; ++i) {
          base64 += '=';
      }
      return base64;
    };
    
    var _decode = function (_base64Str, url_safe) {
      var _len = _base64Str.length;
      var extra_Zero_Count = 0;
      var dictionary = url_safe ? URLSAFE_BASE64_MAPPING : BASE64_MAPPING;
    
      if (_base64Str.charAt(_len - 1) == '=') {
          if (_base64Str.charAt(_len - 2) == '=') {
              //两个等号说明补了4个0
              extra_Zero_Count = 4;
              _base64Str = _base64Str.substring(0, _len - 2);
          } else {
              //一个等号说明补了2个0
              extra_Zero_Count = 2;
              _base64Str = _base64Str.substring(0, _len - 1);
          }
      }
    
      var binaryArray = [];
      for (var i = 0, len = _base64Str.length; i < len; ++i) {
          var c = _base64Str.charAt(i);
          for (var j = 0, size = dictionary.length; j < size; ++j) {
              if (c == dictionary[j]) {
                  var _tmp = _toBinary(j);
                  /*不足6位的补0*/
                  var _tmpLen = _tmp.length;
                  if (6 - _tmpLen > 0) {
                      for (var k = 6 - _tmpLen; k > 0; --k) {
                          _tmp.unshift(0);
                      }
                  }
                  binaryArray = binaryArray.concat(_tmp);
                  break;
              }
          }
      }
      if (extra_Zero_Count > 0) {
          binaryArray = binaryArray.slice(0, binaryArray.length - extra_Zero_Count);
      }
      var str = _toUnicodeStr(binaryArray);
      return str;
    };
    
    export const Base64 = {
      encode: function (str) {
          return _encode(str, false);
      },
      decode: function (base64Str) {
          return _decode(base64Str, false);
      },
      urlsafe_encode: function (str) {
          return _encode(str, true);
      },
      urlsafe_decode: function (base64Str) {
          return _decode(base64Str, true);
      }
    };

tools.js： 实现思路就是将SVG的base64字符串解码之后得到svg代码，替换svg的fill属性来改变颜色，然后再Base64编码回去。（直接复制即可）

import { Base64 } from "./Base64";
    
    export const getColorSVG = (svgBase64, color) => {
        try {
            svgBase64 = svgBase64.substring(svgBase64.indexOf(',') + 1, svgBase64.length);
            const svg = Base64.decode(svgBase64);// 解码得到svg代码
            if (/<svg /.test(svg)) {// 先简单判断是一下否是一个svg
                let newSvg;
                if (/fill=".*?"/.test(svg)) {
                    newSvg = svg.replace(/fill=".*?"/g, `fill="${color}" `);  // SVG有默认色，注意结尾跟一个空格
                } else {
                    newSvg = svg.replace(/<svg /, `<svg fill="${color}" `); // 无默认色，注意结尾跟一个空格
                }
                return 'data:image/svg+xml;base64,' + Base64.encode(newSvg); // 替换完之后再组合回去
            }
        } catch { }
        return '';
    };

组件svg.js

import SvgManager from "../../pages/widgets/classSchedule/classSchedulePage/classSvg"
    import { getColorSVG } from "../../utils/tools"
     
    Component({
        options: {
            styleIsolation: 'apply-shared',
            virtualHost: true
        },
        properties: {
            /** 图标名称 */
            name: {
                type: String,
                value: ''
            },
            /** 图标颜色 */
            color: {
                type: String,
                value: '#000000'
            },
            size: {
                type: String,
                value: '28rpx'
            }
        },
        observers: {
            // 监听名称和颜色变化
            'name,color': function (name, color) {
                this.changeIcon(name, color);
            }
        },
        data: {
            svgData: ''
        },
     
        methods: {
            changeIcon(name, color) {
                let svgBase64 = SvgManager[name]; // 从svg管理器中取出对应svg
                svgBase64 = getColorSVG(svgBase64, color); // 替换它的颜色
                this.setData({
                    svgData: svgBase64 // 渲染
                });
            }
        }
    })

在此处呢，就是我们所需要的所有的代码。

之后呢，在实际的代码引用的过程中我们只需要（此处的m-icon是我自己引用组件设置的名字，各位可以自己设置名字，name为你classSvg.js里面保存的base64的名字，color为你想改变的颜色，size为你需要的图片的大小）

<m-icon name="attachment" color="#689658" size="30rpx" />

就可以在我们的页面之上对我们需要的svg进行一个变色处理了

以下就是我们颜色变换的一个效果图啦！！！

![e51d1c37c68b468daa2293185d0dec24.png][]

## 三、总结 ##

当时小编遇到这个问题的时候头疼了好久的，最后在团队的一位学长的帮助下搞出来了，很感谢呀，这个位置呢，其实也就是去更改了base64里面控制颜色的一部分代码，这个就是最基础的逻辑思路了，okok，那今天的分享就到这里了，期待和各位一起变强呀！![8258bc5fce914b44a79c31b24f213311.jpeg][]

[822dd5228a2f5a7c6cbb120f465d9ec8.png]: https://img-blog.csdnimg.cn/img_convert/822dd5228a2f5a7c6cbb120f465d9ec8.png
[e229c62092804d658624fa75e93a4916.png]: https://img-blog.csdnimg.cn/e229c62092804d658624fa75e93a4916.png
[e51d1c37c68b468daa2293185d0dec24.png]: https://img-blog.csdnimg.cn/e51d1c37c68b468daa2293185d0dec24.png
[8258bc5fce914b44a79c31b24f213311.jpeg]: https://img-blog.csdnimg.cn/8258bc5fce914b44a79c31b24f213311.jpeg