在SVG元素中嵌入iframe

我遇到的问题是我试图使用jquery在svg元素中嵌入iframe，并且我无法获取要绘制的iframe。这里是从堆栈溢出的例子，这是非常相似，我想要的东西，但想只显示一个HTML片段：在SVG元素中嵌入iframe

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>

来源

2011-06-30 Jlange

我的解决办法是放弃的iframe一起到一个iframe追加到foreignobject。由于我在一个文档中嵌入了一个svg元素，然后在svg中嵌入了另一个html元素，所以内容似乎被阻塞了。对于我的特殊情况，iframe不是解决我的问题的最佳方法。 – Jlange

那么什么是解决方案？ –

我最终只是在我的页面上放置了一个div，并带有我想要的工具栏。不需要在工具栏上的svg上绘制任何东西。浮动div更好用。 – Jlange

最后我只是浮动一个div周围我的页面带有我想要的工具栏。不需要在工具栏上的svg上绘制任何东西。浮动div更好用。

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

来源

2011-07-29 00:29:36 Jlange

这不是问题。如果使用Javascript动态地将HTML嵌入到SVG中是不可能的，请解释原因。如果您不知道，请不要以明显的解决方法发布答案，作为答案。 –

看到我写了这个问题，我从来没有说过要将HTML嵌入到SVG中是不可能的，我只是说我的情况并不是最好的解决方案。你甚至读过整篇文章吗？ – Jlange

我举例说明了如何将iframe嵌入到外部对象标签中。也许在你毫不留情地投票并抨击我的答案之前，你应该阅读整篇文章。 – Jlange

从内D3.js，我能够使用JavaScript使用XHTML容器

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") 
;

来源

2014-01-16 19:19:09 jonincanada

在SVG元素中嵌入iframe

回答

相关问题