生成没有foreignObject标签的svg答案

【问题标题】：generate svg without foreignObject tag生成没有foreignObject标签的svg
【发布时间】：2017-03-18 22:59:57
【问题描述】：

我正在使用dom-to-image.js 插件。问题是，它会生成一个污染画布的<foreignObject> 标记。这是生成 svg 的部分。

function makeSvgDataUri(node, width, height) {
        return Promise.resolve(node)
            .then(function (node) {
                node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
                return new XMLSerializer().serializeToString(node);
            })
            .then(util.escapeXhtml)
            .then(function (xhtml) {
                return '<foreignObject x="0" y="0" width="100%" height="100%">' + xhtml + '</foreignObject>';
            })
            .then(function (xhtml) {
                return '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">' +
                    xhtml + '</svg>';
            })
            .then(function (svg) {
                return 'data:image/svg+xml;charset=utf-8,' + svg;
            });
    }

如果我只是注释掉 <foreignObject> 标记部分，则图像不会显示。在没有<foreignObject>的情况下生成这个svg的正确方法是什么

【问题讨论】：

结果data URI 是如何呈现的？
这个想法是使用 canvas.toDataURL()。但是在 iOS 浏览器上，它会抛出一个错误，“SecurityError: Dom exception 18. Process is insecure”。经过大量挖掘，我得出的结论是 foreignOBject 标签导致了这个问题。在我的情况下，我只会有相同来源的内容，我只需要删除 foreignObject 标记
文档中描述的.toSvg 方法是否不会返回预期结果？或者，.toSvg 方法是否使用<foreignObject>？
avarachan.com/test3.html 将显示它是如何使用 foreignobject 标签呈现的。但它不适用于ios浏览器
我认为所有方法都使用 makeSvgDataUri() 函数，包括 toSvg

标签： javascript canvas svg

【解决方案1】：

这是自版本 9 以来在 Safari 中引入的已知安全问题。
由于绘制一个foreignObject 意味着要使用一个XMLParser，因此恶意代码在这方面的风险是巨大的。 Safari 可能知道他们在这里缺少一些东西，因此更喜欢污染画布。
这同样适用于所有 svg 图像的边缘下的 IE。

由于这是一个安全问题，因此没有解决方法，除非使用其他不做此类骇人听闻的事情的库。 即使在支持它的浏览器上，也有太多的安全限制应用在这种技术上，它不会有任何好处。

在画布上绘制 html 的唯一可靠方法是使用单独的画布方法。
像 html2canvas 或其他库这样的库会这样做并且不会污染您的画布。

【讨论】：