javascript - 生成没有ForeignObject标签的svg

我正在使用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的正确方法是什么

最佳答案

从版本9开始，这是Safari中引入的一个已知的安全问题。
由于绘制ForeignObject意味着要使用XMLParser，因此在该区域中恶意代码的风险很大。 Safari可能知道他们在这里缺少什么，因此更喜欢弄脏画布。
对于所有SVG图片边缘以下的IE同样如此。

由于这是一个安全问题，因此没有解决方法，只能使用其他不执行此类恶意操作的库。即使在支持该功能的浏览器上，对该技术也应用了太多安全限制，以至于无法发挥任何作用。

在画布上绘制html的唯一可靠方法是完全使用画布方法。
诸如html2canvas之类的库或其他库会这样做，并且不会污染您的画布。