uniapp 使用svg

一、common/function.js 方法封装

  // svg 转成url
  svgToUrl(url) {
    var encoded = url
      .replace(/<!--(.*)-->/g, "")
      .replace(/[\r\n]/g, " ")
      .replace(/"/g, `'`)
      .replace(/%/g, "%25")
      .replace(/&/g, "%26")
      .replace(/#/g, "%23")
      .replace(/{/g, "%7B")
      .replace(/}/g, "%7D")
      .replace(/</g, "%3C")
      .replace(/>/g, "%3E");

    let res = '"' + `data:image/svg+xml,${encoded}` + '"'; //需要在字符串前后加上一对引号（非常关键！）
    return res;
  },
  // svg 修改图片颜色
  svgChangeColor(url, color, type, index) {
    let modifiedStr;
    // 修改里层颜色
    if (type == 'two-tone') {
      let color2 = color;
      let newColor = color2.replace("#", "%23");
      let str = url; // 原始字符串
      let pattern = /%23[a-zA-Z0-9]{6}/g; // 正则表达式，匹配最后一个数字及之前的任何字符
      // 使用 match() 函数获取所有符合条件的子字符串
      let matches = str.match(pattern);
      // console.log('matchesmatchesmatches', matches)
      // if (matches && matches.length > 0) {
      //   let lastMatch = matches[matches.length - 1]; // 获取最后一个符合条件的子字符串
      //   console.log('lastMatchlastMatchlastMatch', lastMatch)
      //   // 使用 replace() 函数进行修改
      //   modifiedStr = str.replace(lastMatch, newColor);
      // }
      if (matches && matches.length > 0) {
        // 使用 replace() 函数进行修改 指定下标的
        modifiedStr = str.replace(matches[index], newColor);
      }
      return modifiedStr;
    } else {
      // 全颜色修改
      modifiedStr = url.replace(/%23[a-zA-Z0-9]{6}/g, color.replace("#",
        "%23")); //转义后的#等于%23，利用正则表达式，替换所有%23后6位为新的十六进制六位数。
      return modifiedStr;
    }

  },

二、utils 下新建 svg.js 用来存放svg图

const svgObj = {
 ztSvg: '<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>学习专题</title><g id="pc学习端" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="学习专题"><rect id="矩形备份-28" x="0" y="0" width="64" height="64"></rect><g transform="translate(12.000000, 10.000000)" stroke="#D70C19" stroke-linecap="round" stroke-width="3"><path d="M40,34.7741025 L40,35 C40,39.6023729 36.2690396,43.3333333 31.6666667,43.3333333 L8.33333333,43.3333333 C3.73096042,43.3333333 0,39.6023729 0,35 L0,8.33333333 C0,3.73096042 3.73096042,0 8.33333333,0 L31.6666667,0 C36.2690396,0 40,3.73096042 40,8.33333333 L40,24.9512748 L40,24.9512748" id="路径"></path><path d="M11.5,0 L21.5,0 C22.0522847,8.7960173e-16 22.5,0.44771525 22.5,1 L22.5,17.0714286 C22.5,17.6237133 22.0522847,18.0714286 21.5,18.0714286 C21.2196363,18.0714286 20.9521492,17.9537343 20.7627346,17.7470318 L15.7372654,12.2628888 C15.3641401,11.8557084 14.7315772,11.8281013 14.3243968,12.2012266 C14.3029559,12.2208743 14.2823823,12.2414479 14.2627346,12.2628888 L9.23726542,17.7470318 C8.86414006,18.1542122 8.23157723,18.1818193 7.82439678,17.808694 C7.61769432,17.6192794 7.5,17.3517923 7.5,17.0714286 L7.5,4 C7.5,1.790861 9.290861,4.05812251e-16 11.5,0 Z" id="矩形"></path></g></g></g></svg>'
}
export default svgObj

三、 页面使用

<template>
  <view class="title-box">
    <view :style="{'background-image': 'url('+ztSvg+')'}" class="icon"></view>
    <view>{{$t('task.homework')}}</view>
</view>
</template>
<script>
  import svgObj from '@/utils/svg.js'
    export default {
    data() {
      return {
        ztSvg: svgObj.ztSvg,
      }
    },
   onLoad() {
      this.ztSvg= svgObj.ztSvg
      this.ztSvg = this.$f.svgChangeColor(this.$f.svgToUrl(this.ztSvg), '#333333')
   },
   }
</script>
<style scoped lang="scss">
  .title-box {
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #333333;
    display: flex;
    align-items: center;

    image {
            width: 32rpx;
            height: 28rpx;
            margin-right: 16rpx;
      }
   }
  .icon {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 50rpx;
    width: 40rpx;
    margin-right: 6rpx;
  }
</style>