【发布时间】：2011-09-26 05:15:19
【问题描述】：
我遇到的问题是我正在尝试使用 jquery 在 svg 元素中嵌入 iframe，但无法绘制 iframe。这是堆栈溢出的示例，它与我想要的非常相似，只是想简单地显示一个 html sn-p：
Possible to embed a youtube video in an svg?
我的jquery代码是这样的，
function showTextToolbar(selectedGroup){
console.log("here");
var x = +$($(selectedGroup).children().get(0)).attr("x");
var y = +$($(selectedGroup).children().get(0)).attr("y") - 30;
console.log(x);
console.log(y);
var newFOSvg = svgEditor.canvas.addSvgElementFromJson({
"element": "foreignobject",
"id": "textTool",
"attr":{
"x":x,
"y":y,
"width":"360",
"height":"30"
}
});
var newIframeSvg = svgEditor.canvas.addSvgElementFromJson({
"element": "iframe",
"attr":{
"width":"360",
"height":"30",
"src":"http://www.google.com",
"xmlns":"http://www.w3.org/1999/xhtml"
}
});
newFOSvg.appendChild(newIframeSvg);
canv.getElem("svgcontent").appendChild(newFOSvg);
}
基本上，这段代码使用了我的几个预构建函数 (addSvgElementFromJson)，将元素添加到画布上已经存在的 svg 根。我只是使用一个虚拟链接来查看框架是否会出现。在运行时，当我调用该函数时，没有错误出现，并且 svg 部分已正确更新，但没有显示任何内容。
这是使用 iframe 和其他几个对象更新的 svg：
<svg width="600" height="800" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<g id="0ea5f198be28b719853b18c7390003e7">
<rect id="svg_1" width="350" height="50" fill="#ffffff" stroke="#22C" stroke-width="0.5" x="20" y="40"/>
</g>
</g>
<foreignobject height="30" width="360" y="10" x="20">
<iframe xmlns="http://www.w3.org/1999/xhtml" src="http://www.google.com" height="30" width="360"/>
</foreignobject>
</svg>
我似乎已经正确嵌入了 iframe，但我的 svg 画布上没有显示任何内容。任何帮助将不胜感激。
更新：通过在初始组内移动外来对象元素，我可以绘制它，但它是空的。 iframe 仍未显示。此外，通过创建一个嵌入 iframe 的虚拟页面，我可以看到 iframe 内容：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Frameset//EN">
<html>
<body>
<iframe src="test.svg" width="600" height="600"></iframe>
</body>
</html>
并且 test.svg 包含：
<svg width="600" height="800" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<g id="0ea5f198be28b719853b18c739002923" name="text_free">
<rect y="40" x="20" stroke-width="0.5" stroke="#22C" fill="#ffffff" height="50" width="350" name="border"/>
<text y="60" x="40" xml:space="preserve" text-anchor="left" font-family="serif" font-size="12" name="data" opacity="100" stroke-width="0" stroke="#000000" fill="#000000"></text>
</g>
<g id="0ea5f198be28b719853b18c7390003e7" name="text_free">
<rect y="90" x="20" stroke-width="0.5" stroke="#22C" fill="#ffffff" height="50" width="350" name="border"/>
<text y="110" x="40" xml:space="preserve" text-anchor="left" font-family="serif" font-size="12" name="data" opacity="100" stroke-width="0" stroke="#000000" fill="#000000"></text>
</g>
<foreignObject height="500" width="500" y="200" x="70">
<iframe xmlns="http://www.w3.org/1999/xhtml" src="http://www.google.com" height="500" width="500"/>
</foreignObject>
</g>
</svg>
【问题讨论】：
-
我的解决方案是一起放弃 iframe。由于我在文档中嵌入了一个 svg 元素，然后在 svg 中嵌入了另一个 html 元素，因此内容似乎被阻止了。对于我的特殊情况，iframe 并不是解决我问题的最佳方法。
-
我最终只是用我想要的工具栏在我的页面周围浮动了一个 div。不需要在工具栏的 svg 上绘制任何东西。使用浮动 div 效果更好。