DOM 至 canvas

Question

我正在尝试来自 MDN 的示例，其中 HTML 片段被绘制到 canvas。 https://jsfiddle.net/c5xrkgL3/

不过我加了一个在 'like' 字中，现在它不再起作用了。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
          '<foreignObject width="100%" height="100%">' +
          '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
            '<em>I</em> li&nbsp;ke ' +
            '<span style="color:white; text-shadow:0 0 2px blue;">' +
            'cheese</span>' +
          '</div>' +
          '</foreignObject>' +
          '</svg>';

data = encodeURIComponent(data);


var img = new Image();

img.onload = function() {
  ctx.drawImage(img, 0, 0);
  console.log(canvas.toDataURL());

  canvas.toBlob(function(blob) {
    var newImg = document.createElement('img'),
    url = URL.createObjectURL(blob);

    newImg.onload = function() {
      // no longer need to read the blob so it's revoked
      URL.revokeObjectURL(url);
    };

    newImg.src = url;
    document.body.appendChild(newImg);
  });
}

img.src = "data:image/svg+xml," + data

https://jsfiddle.net/c5xrkgL3/1/

知道我应该怎么做才能制作示例工作（同时保留实际的在那里）？

原始 MDN 文章：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

Answer 1

  是 not a valid XML entity。

只有 5 个有效 XML 实体

"
&
'
<
>

HTML 有一个更长的有效实体列表，这是您从中获得 &nbsp 但您没有使用 HTML 文档的地方。

您需要使用   而不是  ，例如li ke 或作为标记：如 ke

DOM 至 canvas

DOM with   to canvas

html

javascript

svg

screenshot

canvas

DOM 至 canvas

DOM with &nbsp; to canvas

html

javascript

svg

screenshot

canvas

DOM with to canvas