生成不带foreignObject标签的svg

generate svg without foreignObject tag

本文关键字：标签 svg foreignObject      更新时间：2023-09-26

我使用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>标记部分，那么图像不显示。什么是正确的方式来生成这个svg没有<foreignObject>

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

由于这是一个安全问题，所以没有解决方法，除非使用其他不做此类黑客行为的库。即使在支持它的浏览器上，这种技术也有很多安全限制，所以它不会有任何好处。

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

相关文章：