javascript - 生成不带foreignObject标签的svg

Question

我正在使用dom-to-image.js插入。麻烦的是，它生成一个 <foreignObject>污染 Canvas 的标签。这是生成 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 的正确方法是什么？

Answer 1

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

由于这是一个安全问题，因此没有解决方法，除非使用其他不执行此类黑客操作的库。 即使在支持它的浏览器上，该技术也应用了如此多的安全限制，因此它不会有任何好处。

在 Canvas 上绘制 html 的唯一可靠方法是使用单独的 Canvas 方法。
像 html2canvas 或其他库这样的库会执行此操作，并且不会污染您的 Canvas 。