今天接到一个需求：配置菜单和图标，其中图标要变色,最终定下的方案上传svg图片，而且要是path-路径的svg，如下图这种的svg

<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg">
  <path d="M115.625 127.937H.063V12.375h57.781v12.374H12.438v90.813h90.813V70.156h12.374z"/>
  <path d="M116.426 2.821l8.753 8.753-56.734 56.734-8.753-8.745z"/>
  <path d="M127.893 37.982h-12.375V12.375H88.706V0h39.187z"/>
</svg>

改变高宽：设置svg元素中的width和height

改变颜色：设置path元素中的fill设置颜色——fill="#FFFFFF"（这条路线设置未白色）

大致方案定了，开搞：

1、第一步上传文件到服务器，拿到svg资源——从接口拿到一个链接，用ajax请求拿到文件流，我们这边是存为html代码,因为文件本身就是text

  /**
   * 将接口返回的svg链接改为text文本格式-然后用v-html显示
   * @param url
   */  
toInlineSvg (url) {
    return new Promise(resolve => {
      const xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
        /**
            拿到的是链接转成的svg文本
            <svg width="128" height="128" xmlns="http://www.w3.org/2000/svg">
              <path d="M115.625                 127.937H.063V12.375h57.781v12.374H12.438v90.813h90.813V70.156h12.374z"/>
              <path d="M116.426 2.821l8.753 8.753-56.734 56.734-8.753-8.745z"/>
              <path d="M127.893 37.982h-12.375V12.375H88.706V0h39.187z"/>
            </svg>
        */
          resolve(xhr.responseText)
        }
      }
      xhr.open('GET', url, true)
      xhr.send(null)
    })
  },

2、设置宽高

  /**
   * 将svgText文本增加style属性，然后用正则匹配出<svg ..... >-在后面拼上style(width/height/fill)
   * @param svgText
   * @param color
   * @param width
   * @param height
   */
  setSvgHtmlWidth (svgText, width, height) {
    // 找出<svg ... >
    const svgStart = svgText.match(/<svg[^>]*?>/gim)
    // 需要拼接的style字符串
    const style = `style="width:${width}px; height:${height}px;" >`
    // 将> 替换为 style="width:50px; height:50px;fill:red" >
    const _svgStart = svgStart[0].replace(/>/, style)
    // 将找出来的第一个<svg .... > 全部替换为后面加好样式的
    const reg = new RegExp(svgStart[0])
    const result = svgText.replace(reg, _svgStart)
    return result
  },

3、设置颜色，如果path里面是完全没有fill属性设置颜色的直接在svg里面设置fill="red"就可以设置颜色了，但是如果原本的path里面是有颜色的，就要找到颜色修改颜色，其实也就是使用repalce替换颜色——下面是我实际用到的svg本身是有颜色的，所以直接替换为白色

  setSvgHtmlColorWhite (svgText) {
    const str = svgText.replace(/fill="#4D5170"/ig, 'fill="#FFFFFF"')
    const str2 = str.replace(/fill="#5C82EE"/ig, 'fill="#FFFFFF"')
    return str2
  }

其他的属性也可以修改，只要对着html代码然后再从svg文本中找出来改了就可以实现各种修改

反正这个功能挺鸡肋的，我们UI用的sketch不能生成path的svg，只能先将图片上传到阿里的iconfonts网站上，然后再下载下来，才是我们要求的svg