时间戳

首页 > 解决方案 > 如何使用 Javascript 在 Canvas 上绘制 SVG？

javascript - 如何使用 Javascript 在 Canvas 上绘制 SVG？

问题描述

如何使用 Javascript（不使用 Dom）在 Canvas 上绘制此 svg？

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg>

注意：post this和this中的答案仅在您有外部 SVG 时提供解决方案。我的要求是在画布（或其他任何东西）上绘制多个 svgs 变量 x、y、半径和颜色

标签： javascripthtmlcsssvgcanvas

解决方案

尝试使用图像来绘制（所以片段不起作用 - 但是当你编辑它时 - 它起作用）

let xml = new XMLSerializer().serializeToString(circSvg);   // get svg data
let svg64 = btoa(xml);                         // make it base64
let b64Start = 'data:image/svg+xml;base64,';
let image64 = b64Start + svg64;                // prepend a "header"

circImg.src = image64;                         // image source
circImg.onload = x=> {
  can.getContext('2d').drawImage(circImg, 0, 0); // draw
}
svg<br>
<svg id="circSvg" width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg> 

<br>canvas<br> <canvas id="can"></canvas>

<img id="circImg" style="display:none">

推荐阅读