使用Canvg将SVG绘制到画布上

Question

我使用canvg将SVG文件设置在画布中。 当我设置SVG网址时，一切都正常：

var canvas = doc.getCanvas(num);
var context = canvas.getContext('2d');

context.drawSvg("http://localhost:8084/manual.svg", 0, 0, width, height);

但是当我尝试编写时（它无法工作）：

context.drawSvg("data:image/svg+xml,"+svg, 0, 0, width, height);

获取手动.svg文件的内容，存储在变量svg中。

- Alexandra

---

字符串'svg'是否进行了URL编码？测试的方法是将数据URI复制粘贴到浏览器的地址栏中，然后查看是否正确显示。 - Erik Dahlström

Erik，谢谢你的回复。我用drawImage函数解决了那个问题。而且它比drawSvg更快。 - Alexandra

Answer 1

img.src = "data:image/svg+xml;base64,"+btoa(svgContent);
context.drawImage(img, 0, 0, width, height);

这是解决问题的一种方案。

- Alexandra

---

变量svgContent中是什么？Canvas还是Context？ - Kakitori

svgContent 需要是 svg 元素的 outerHTML（包括 <svg> 标签本身）。 - Mike Furlender