Question

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

Answer 1

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

由于这是一个安全问题，除了使用其他没有像这样的hacky之类的库之外，没有解决方法。 即使在支持它的浏览器上，对这种技术应用了很多安全限制，也不会有任何好处。

在画布上绘制html的唯一可靠方法是使用唯一的画布方法来实现像html2canvas这样的库可以做到这一点，不会污染你的画布。

生成没有foreignObject标记的svg

1 个答案: