生成没有foreignObject标记的svg [英] generate svg without foreignObject tag

问题描述

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

I am using dom-to-image.js plugin. The trouble is, it generates a <foreignObject> tag that taints the canvas. Here is the part that generates the 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>

IF I simply comment out the <foreignObject> tag section, then the image does not show. What is the correct way of generating this svg without <foreignObject>

推荐答案

<生成此svg的正确方法是什么？这是自版本9以来在safari中引入的一个已知安全问题。

由于绘制foreignObject意味着要使用XMLParser，因此恶意代码的风险在这方面是巨大的。 Safari可能知道他们在这里缺少某些内容并且更喜欢污染画布。

同样适用于所有svg图像下边缘的IE。

This is a known security issue introduced in safari since version 9.
Since drawing a foreignObject implies an XMLParser to be used, the risk for malicious code is huge in this area. Safari probably knows that they lack of something in here and prefer to taint the canvas.
The same applies for IE below edge with all svg images.

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

Since this is a security issue, there is no workaround, except using an other library that don't do hacky things like this. Even on browsers that do support it, there is so many security restrictions applied on this technique that it won't do any good.

在画布上绘制html的唯一可靠方法是使用唯一的画布方法。

像html2canvas或其他类似的库这样做并且不会污染你的画布。

The only solid way to have your html drawn on the canvas is to use solelly canvas methods to do so.
Libraries like html2canvas or others do this and won't taint your canvas.

这篇关于生成没有foreignObject标记的svg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！