ДОМ с холстом

Question

Я пробую пример из MDN, в котором HTML-фрагмент рисуется на холсте.https://jsfiddle.net/c5xrkgL3/

Однако я добавил слово «как» и теперь оно больше не работает.

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

  является недопустимым объектом XML .

Есть только 5 допустимых объектов XML

• "
• &
• '
• <
• >

HTML имеет гораздо более длинный список допустимых объектов, откуда вы получили &nbsp, но вы не используете HTML-документ.

Вместо   вам нужно будет использовать  , например. li ke или как разметка: li ke