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

Question

我只是想将svg转换为html画布，它工作正常，直到我在svg中使用图像元素，如果我使用图像元素意味着canvg无效。

这是我用来将svg转换为canvas

的代码

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

您需要将图片转换为数据网址。传递给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. 选择从网址中检索
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>')