Javascript 将带有图像元素的svg转换为html画布

我只是尝试将svg转换为html画布，在svg中使用image元素之前，它工作得很好，如果我使用image元素，则意味着

canvg

不起作用

这是我用来将svg转换为画布的代码

var svgCanvas, context, svgCanvasElement, link;
svgCanvas = $('<canvas id="svgCanvas" width="250px" height="25px" style="display:none;"></canvas>');
context = svgCanvas[0].getContext('2d');
svgCanvasElement = $(svgCanvas)[0];
var serializer = new XMLSerializer();
var svgElement = document.getElementsByTagName("svg");
var svg = serializer.serializeToString(svgElement[0]);
var canvgMethod = new canvg(svgCanvasElement, svg);

var svgCanvas，上下文，svgCanvas元素，链接；
svgCanvas=$（''）；
context=svgCanvas[0]。getContext（'2d'）；
svgCanvasElement=$（svgCanvas）[0]；
var serializer=新的XMLSerializer（）；
var svgElement=document.getElementsByTagName（“svg”）；
var svg=serializer.serializeToString（svgElement[0]）；
var canvgMethod=新的canvg（svgCanvasElement，svg）；

这里不工作

注意：此代码适用于其他元素，如圆、矩形、多边形等。这里使用的是圆元素

如何解决此问题以及如何将此图像元素转换为画布？

---

任何建议都将不胜感激。

您需要将图像转换为数据URL。传递给canvg的内容必须在单个文件中完成，并且不能有外部引用

我可以告诉你看一幅作品的步骤。从这个开始

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image xlink:href="paste your data URL in here" height="75" width="75" y="27.5" x="29.5"></image>
</svg>

后藤

选择“从URL检索”

输入作为URL

在上面指定的位置替换输出（太大，此处无法包含）

将上面的全部批次粘贴到测试中

完成后，请参见左侧的结果。注意我只在Firefox上测试过这个

试试这个：- 它是使用

canvg

插件完成的

//在画布中加载id为'drawingArea'的svg片段
canvg（document.getElementById（'canvas'），'…'）

谢谢您的回复。你能不能编辑我的提琴样本，让它工作，或者你能在这里发布一些代码。这是我最新的小提琴与您的指示，但它不适合我。我做了什么错事了吗？或者我遗漏了什么。@karthik这回答了你的问题吗？谢谢，但它不起作用。你能让我的小提琴为你的答案工作吗？你用的是什么。您可能只是遇到了在UA中没有实现的东西。@wizkid它在fiddle中工作，但在html中不工作，它在canvg中抛出了一个“SyntaxError”。js@wizkid,我收到了此错误消息：0x800a139e中第136行第5列的未处理异常-JavaScript运行时错误：SyntaxError

//load a svg snippet in the canvas with id = 'drawingArea'
  canvg(document.getElementById('canvas'), '<svg>...</svg>')