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

Question

我只是想将 svg 转换为 html 画布，它可以正常工作，直到我在 svg 中使用图像元素，如果我使用图像元素意味着 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);

这里不工作JSFiddle DEMO。

注意：此代码适用于圆形、矩形、多边形等其他元素。这里是 JSFiddle Demo 与圆形元素。

如何解决这个问题以及如何将此图像元素转换为画布？
任何建议将不胜感激。

Answer 1

您需要将图像转换为数据 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>

1. 转到http://dopiaza.org/tools/datauri/index.php
2. 选择从 URL 检索
3. 输入http://archiveteam.org/images/thumb/4/40/Google_Logo.png/800px-Google_Logo.png 作为网址
4. 在上面指出的地方替换输出（这里太大了，不能包含）
5. 将上面的全部内容粘贴到测试中box here
6. 您已完成，请查看左侧的结果。请注意，我只在 Firefox 上对此进行了测试。

Answer 2

试试这个：- http://jsfiddle.net/adiioo7/xvQHb/3/

使用canvg插件Reference

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