uniapp 使用svg

一、common/function.js 方法封装

  // svg 转成urlsvgToUrl(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.ztSvgthis.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>