Question

我遇到的问题是我试图使用jquery在一个svg元素中嵌入一个iframe，而我无法得到iframe。这是一个堆栈溢出的例子，它非常类似于我想要的，除了想要简单地显示一个html片段：

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画布上没有显示任何内容。任何帮助将不胜感激。

更新：通过将foreignobject元素移动到初始组中，我可以将其绘制，但是为空。 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>

Answer 1

我最后只是在我的页面上使用我想要的工具栏浮动div。不需要在工具栏的svg上绘制任何东西。使用浮动div可以更好地工作。

更新 - 对于那些希望实现我的原始目标的人，必须使用jQuery将SVG命名空间的外部对象节点附加到基础SVG。

Answer 2

在D3.js中，我能够使用javascript使用xhtml容器将iframe附加到foreignobject

var the_container=the_foreignObject.append("xhtml:body")

var the_iframe.append("iframe")
    .attr("src", function(d) {
        the_url="http://bl.ocks.org/mbostock/raw/1256572";
        return the_url;
    })
    .attr("width", background_width)
    .attr("height", background_height/2)
    .attr("frameborder","0")
;

SVG元素中嵌入的iframe

2 个答案: