为 HTML5 Canvas 生成 SVG答案

【问题标题】：Generate SVG for HTML5 Canvas为 HTML5 Canvas 生成 SVG
【发布时间】：2016-07-11 05:30:38
【问题描述】：

我想将 SVG 生成为 HTMLImageElement，所以我可以将它放在 <canvas> 元素上。所以我在这里：

function makeButton(evt) {
    var svgns = "http://www.w3.org/2000/svg";

    var svg = document.createElementNS(svgns, "svg");
    svg.setAttribute('style', 'border: 1px solid black');
    svg.setAttribute('width', '59');
    svg.setAttribute('height', '59');
    svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");

    var shape = document.createElementNS(svgns, "circle");
    shape.setAttributeNS(null, "cx", 25);
    shape.setAttributeNS(null, "cy", 25);
    shape.setAttributeNS(null, "r",  20);
    shape.setAttributeNS(null, "fill", "grey");

    svg.appendChild(shape);
    return svg;
}

然后：

var myButton = makeButton();
canvasContext.drawImage(myButton, offsetX, offsetY, width, height);

它说，myButton 不是 HTMLImageElement（它是 XML）吗？

【问题讨论】：

myButton 是一个 SVGSVGElement。 w3.org/TR/SVG/struct.html#InterfaceSVGSVGElement

标签： javascript xml dom canvas svg

【解决方案1】：

您不能直接在画布上绘制 SVG，因为它不是 HTMLImageElement，而是 SVG 元素（呵呵）。

解决方法是创建一个新的 HTMLImageElement 并使用 SVG 作为其源。

var myButton = makeButton();
var svgData = new XMLSerializer().serializeToString(myButton);
var blob = new Blob([svgData], {type: "image/svg+xml;charset=utf-8"});
var url = window.URL.createObjectURL(blob);
var img = new Image();
img.src = url;
canvasContext.drawImage(img, offsetX, offsetY, width, height);

那么这里发生了什么？一行一行：

创建新的 SVG 元素
将 SVG 转换为 XML 字符串（无法从 SVG 元素创建 blob）
从 XML 字符串创建 blob（一个 blob 基本上是原始数据）
使用 blob 创建可用于图像 src 的 URL
创建新的图像元素
将 Image src 设置为我们的 blob URL
在画布上绘制图像

编辑：正如所指出的，将drawImage 调用放在回调中是个好主意，这样您就知道图像元素在它发生时会准备好。

【讨论】：