svg 的 dataUri 的使用

let busDownSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 48 48"><g transform="translate(5090 -8088)"><circle cx="24" cy="24" r="24" transform="translate(-5090 8088)" fill="#fff"/><path d="M24,2a22.006,22.006,0,0,0-8.563,42.272A22.006,22.006,0,0,0,32.563,3.728,21.86,21.86,0,0,0,24,2m0-2A24,24,0,1,1,0,24,24,24,0,0,1,24,0Z" transform="translate(-5090 8088)" fill="#ff7400"/><path d="M11.761,25.291,0,30,11.81,1.579,23.664,30Z" transform="translate(-5078 8094.421)" fill="#ff7400"/></g></svg>';

/**
 * svg 的 utf8 编码方法
 * @param {*} svg图标
 * @returns utf8 编码后的 svg 数据
 */
function encodeSvg(svg) {
  return svg
    .replace(
      "<svg",
      ~svg.indexOf("xmlns") ? "<svg" : '<svg xmlns="http://www.w3.org/2000/svg"'
    )
    .replace(/"/g, "'")
    .replace(/%/g, "%25")
    .replace(/#/g, "%23")
    .replace(/{/g, "%7B")
    .replace(/}/g, "%7D")
    .replace(/</g, "%3C")
    .replace(/>/g, "%3E");
}

/**
 * svg 图标转换为 dataUri 方法
 * @param {*} svg svg图标
 * @param {*} angle 旋转角度
 * @returns svg 格式的 dataUri
 */
export function svgIconToDataUri(svg, angle) {
  // 旋转 svg 图标的角度
  svg = svg.replace("<svg", `<svg style="transform: rotate(${angle}deg)"`);
  return `data:image/svg+xml;utf8,${encodeSvg(svg)}`;
}

svgIconToDataUri(svg, orientation)；