如何使用 Javascript 在 Canvas 上绘制 SVG？ [复制]答案

【问题标题】：How to draw a SVG on Canvas using Javascript? [duplicate]如何使用 Javascript 在 Canvas 上绘制 SVG？ [复制]
【发布时间】：2023-03-19 14:47:01
【问题描述】：

如何使用 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>

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

【问题讨论】：

stackoverflow.com/a/25095549/8620333 ?
@TemaniAfif 这不是 SVG 我想绘制 SVG 以便在缩放时它不会像素化。这将在缩放时像素化
据我所知，这不是画布的目的。 SVG 是为可缩放矢量而制作的，而画布是为位图和逐像素渲染而制作的。 (educba.com/svg-vs-canvas)。即使您在画布内绘制 SVG 的内容，您仍然会遇到缩放问题
来自上面的链接：SVG 不依赖于分辨率，意味着它与分辨率无关。如果我们放大图像，它不会失去它的形状。画布取决于分辨率。如果图像被放大，它将开始反映图像的像素。
@TemaniAfif 有替代方案吗？如何使用 javascript 制作可扩展的画布，我需要将 x,y 动态传递给它

标签： javascript html css svg canvas

【解决方案1】：

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

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">

【讨论】：

我看到一个空画布（使用 Chrome）
立即尝试（我使用 setTimeout 等待一段时间...）
@KamilKiełczewski 您忘记等待图像加载事件。它是否有效是随机的
@dota2pro 它将二进制字符串转换为 ascii 字符串 - 更多信息 here
您可以使用let svgArr = [...document.querySelector('svg')] 获取 svg-s 数组并对其进行迭代 - 如果 dom 中没有 svg - 那么该数组将为空 - 因此将执行任何循环迭代你的画布将是空的