前端读取svg文件 修改svg图标颜色 base64编码图标路径并展示

读取svg文件

  

   

    

     

    
    

     

      /**
     
    
   

    

     

    
    

     

       * 读取svg文件
     
    
   

    

     

    
    

     

       * @filePath:svg文件路径
     
    
   

    

     

    
    

     

      */
     
    
   

    

     

    
    

     

      readFile(filePath) {
     
    
   

    

     

    
    

     
    
      // 创建一个新的xhr对象
     
    
   

    

     

    
    

     
    
      let xhr = 
      null
     
    
   

    

     

    
    

     
    
      if (
      window.XMLHttpRequest) {
     
    
   

    

     

    
    

     

              xhr = 
      new XMLHttpRequest()
     
    
   

    

     

    
    

     

          } 
      else {
     
    
   

    

     

    
    

     

              xhr = 
      new ActiveXObject(
      'Microsoft.XMLHTTP')
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     
    
      const okStatus = 
      document.location.protocol === 
      'file' ? 
      0 : 
      200
     
    
   

    

     

    
    

     

          xhr.open(
      'GET', filePath, 
      false)
     
    
   

    

     

    
    

     

          xhr.overrideMimeType(
      'image/svg+xml')
     
    
   

    

     

    
    

     

          xhr.send(
      null)
     
    
   

    

     

    
    

     
    
      return xhr.status === okStatus ? xhr.responseText : 
      null
     
    
   

    

     

    
    

     

      },  
     
    
  

根据不同条件修改svg图标颜色

  

   

    

     

    
    

     

      // 读取svg文件,修改图标颜色
     
    
   

    

     

    
    

     

      var title = 
      this.readFile(
      "../images/测试.svg");
     
    
   

    

     

    
    

     

      var newSvg;
     
    
   

    

     

    
    

     

      if(item.id==
      1){
     
    
   

    

     

    
    

     

          newSvg=title.replace(
      /#(?:[0-9a-fA-F]{6})/g, 
      "#FF0000")
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      if(item.id==
      2){
     
    
   

    

     

    
    

     

          newSvg=title.replace(
      /#(?:[0-9a-fA-F]{6})/g, 
      "#0000FF")
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      if(item.id==
      3){
     
    
   

    

     

    
    

     

          newSvg=title.replace(
      /#(?:[0-9a-fA-F]{6})/g, 
      "#FFFFFF")
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      //编码svg图标地址
     
    
   

    

     

    
    

     

      var svgUrl = 
      'data:image/svg+xml;base64,' + 
      window.btoa(
      unescape(
      encodeURIComponent(newSvg)));         
     
    
  

使用svg图标

<img :src="svgUrl" style="width：25px;height:25px;">