项目总结-svg-sprite-loader处理后原生引入svg并换色

为什么

经过svg-sprite-loader处理后，当img标签引入的是#name-hash地址，但是又必须获取svg图片的地址，然后进行换色处理，所以研究了该方法。

原理

svg-sprite-loader处理svg后会在body里前方生成引入的所有svg图片的集合，如图。

代码

/**
 * 获取svg图片的代码
 * @param id  传入被编译后的id  eg: xiayinghao: require('../../assets/icons/xiayinghao.svg'),--会被插件svg-sprite-loader解析为#xiayinghao-hash
 * @return {string}  svg代码
 */
export function getSvg(id) {
    let dom = document.querySelector(id);
    let domChild = dom.innerHTML;
    let domAttr = dom.getAttribute('viewBox');
    let width = domAttr.split(' ')[2];
    let height = domAttr.split(' ')[3];
    console.log(`<svg viewBox="${domAttr}" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">${domChild}</svg>`)
    return `<svg viewBox="${domAttr}" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">${domChild}</svg>`;
}

/**js
 *处理svg代码将他转换成对应颜色的base64位代码
 * @param svg
 * @param color 颜色
 * @return {string} base64位代码
 */
export function svgBase64(svg, color) {
    // 换色--只适合#FFFFFFF这种十六进制的单色图片
    let newSvg = svg.replace(/#[a-zA-Z0-9]{6}/g, color);
    return 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(newSvg)));// svg转base64
}