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;
    }

  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

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

const svgObj = {
 ztSvg: ''
}
export default svgObj
1
2
3
4

三、 页面使用

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43