咨询：含 的DOM片段无法绘制到Canvas的解决办法

嘿，我碰到过类似的坑，问题其实出在encodeURIComponent对HTML实体的处理上。当你把 放进SVG字符串再用encodeURIComponent编码后，&会被转成%26，原本的 就变成了%26nbsp%3B——SVG解析时会把这个当成普通文本，而非非断空格实体，自然就跑不起来了。

这里有两种简单的解决办法，都能保留非断空格的效果：

方法一：用Unicode非断空格代替HTML实体 #

直接把 换成对应的Unicode字符\u00A0，编码后能被SVG正确识别为空格。修改后的核心代码片段：

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\u00A0ke ' + // 用\u00A0替代&nbsp;
           '<span style="color:white; text-shadow:0 0 2px blue;">' +
           'cheese</span>' +
           '</div>' +
           '</foreignObject>' +
           '</svg>';

编码后\u00A0会被转成%C2%A0，SVG里的XHTML能正确解析为非断空格，效果和 完全一致。

方法二：调整编码逻辑，保留HTML实体 #

如果你坚持要用 这个实体，可以不用encodeURIComponent，而是手动处理SVG内容里的特殊字符，直接拼接成data URI。注意在SVG的XML内容里，&本身需要转义成&，这样SVG解析器才会把它还原成 交给内部的XHTML处理。修改后的代码：

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&amp;nbsp;ke ' + // 用&amp;nbsp;替代&nbsp;，适配SVG的XML语法
           '<span style="color:white; text-shadow:0 0 2px blue;">' +
           'cheese</span>' +
           '</div>' +
           '</foreignObject>' +
           '</svg>';
// 可选：替换双引号为单引号，避免URI里的引号冲突
data = data.replace(/"/g, "'");
var img = new Image();
img.src = "data:image/svg+xml," + data;

两种方法都能让你的Canvas绘制恢复正常，我个人更推荐第一种，Unicode字符的处理更直接，不容易踩语法转义的坑。

内容的提问来源于stack exchange，提问作者Raul