如何将foreignObject附加到svg图像

Question

我在html中嵌入了svg图像，如下所示：

<object width="1615" height="534" data="image.svg"></object>

SVGDocument可通过以下方式获得：

document.getElementsByTagName('object')[0].getSVGDocument()

我想在其中添加带有自定义html的foreignObject。这是可能的以及如何做到这一点？

Answer 1

我想是这样的。

var doc = document.getElementsByTagName('object')[0].getSVGDocument();
var fo = doc.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
fo.setAttribute("width", "100%");
fo.setAttribute("height", "100%");
var body = doc.createElement("body");
fo.appendChild(body);
// etc to append whatever html content you want...
doc.documentElement.appendChild(fo);