SVG图形绘制到Canvas画布

展示

代码

• HTML：

  <h4>SVG原图</h4>
  <svg width="100" height="100">
      <circle cx="50" cy="50" r="40"></circle>
  </svg>
  
  <h4>Canvas绘制</h4>
  <canvas></canvas>

• JS：

  // SVG安全转义的方法
  const encodeSvg = function (str) {
    return "data:image/svg+xml," + str.replace(/"/g,"'").replace(/%/g,"%25").replace(/#/g,"%23").replace(/{/g,"%7B").replace(/}/g,"%7D").replace(/</g,"%3C").replace(/>/g,"%3E");
  }
  // canvas绘制元素
  const canvas = document.querySelector('canvas');
  const context = canvas.getContext('2d');
  // 临时创建一个IMG元素
  const img = document.createElement('img');
  img.onload = () => {
    context.drawImage(img, 0, 0);
  }
  // 需要处理的SVG元素
  const svg = document.querySelector('svg');
  // 添加命名空间，如果有命名空间此代码无需执行
  svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  // 转义并作为属性值
  img.src = encodeSvg(svg.outerHTML);