svg 常用代码

svg图片换色

/**
 * @description: svg图片换色
 * @param {String} domId
 * @param {Array} fillColor [255, 255, 255]
 * @param {Array} strokeColor [0, 0, 0]
 * @return {*}
 */
svgChangeColor(domId = '', fillColor = null, strokeColor = null) {
  if (!domId) return;
  const dom = document.querySelector(`#${domId}`);
  const fillStyle = fillColor ? `fill:${fillColor};` : ''; // fill=填充色
  const strokeStyle = strokeColor ? `stroke:${strokeColor};` : ''; // stroke=描边色
  dom.setAttribute(
    'style',
    `${fillStyle}${strokeStyle}`
  );
}

svg转base64图片

/**
 * @description: svg图转base64图
 * @param {String} svgDom <Element>
 * @return {*}
 */
svgToBase64(svgDom) {
  if (!svgDom) return;
  const serial = new XMLSerializer().serializeToString(svgDom);
  return `data:image/svg+xml;base64,${window.btoa(serial)}`;
}

问题：svg 转 base64 时报错误信息 Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.。

原因：在“Window”上执行“btoa”失败：要编码的字符串包含 Latin1 范围之外的字符。

解决：在执行 window.btoa(svgSerial) 方法前，先对 svg 字符串进行编码可解决。