小程序里顯示svg的方法

生成了svg之后，不能直接顯示到小程序里，可以處理一下，然后直接用image src 即可

 

 svgData(svg)
{
  // 將被設置到 dataset 中的屬性還原出來
  svg = svg.replace(/data-(.*?=(['"]).*?\2)/g, '$1');

  // 將被設置到 data-xlink-href 的屬性還原出來
  svg = svg.replace(/xlink-href=/g, 'xlink:href=');

  // 將 dataset 中被變成 kebab-case 寫法的 viewBox 還原出來
  svg = svg.replace(/view-box=/g, 'viewBox=');

  // 清除 SVG 中不應該顯示的 title、desc、defs 元素
  svg = svg.replace(/<(title|desc|defs)>[\s\S]*?<\/\1>/g, '');

  // 為非標准 XML 的 SVG 添加 xmlns，防止視圖層解析出錯
  if (!/xmlns=/.test(svg)) svg = svg.replace(/<svg/, "<svg xmlns='http://www.w3.org/2000/svg'");

  // 對 SVG 中出現的浮點數統一取最多兩位小數，緩解數據量過大問題
  svg = svg.replace(/\d+\.\d+/g, (match) => parseFloat(parseFloat(match).toFixed(2)));

  // 清除注釋，緩解數據量過大的問題
  svg = svg.replace(/<!--[\s\S]*?-->/g, '');

  // 模擬 HTML 的 white-space 行為，將多個空格或換行符換成一個空格，減少數據量
  svg = svg.replace(/\s+/g, " ");

  // 對特殊符號進行轉義，這里參考了 https://github.com/bhovhannes/svg-url-loader/blob/master/src/loader.js
  svg = svg.replace(/[{}\|\\\^~\[\]`"<>#%]/g, function (match) {
    return '%' + match[0].charCodeAt(0).toString(16).toUpperCase();
  });

  // 單引號替換為 \'，由於 kbone 的 bug，節點屬性中的雙引號在生成 outerHTML 時不會被轉義導致出錯
  // 因此 background-image: url( 后面只能跟單引號，所以生成的 URI 內部也就只能用斜杠轉義單引號了
  svg = svg.replace(/'/g, "\\'");

  // 最后添加 mime 頭部，變成 Webview 可以識別的 Data URI
  return 'data:image/svg+xml,' + svg.trim();
}