The problem that I am having is that I am trying to embed an iframe within an svg element using jquery, and I am unable to get the iframe to be drawn. Here is an example from stack overflow that is very similar to what I want, except that would like to simply display an html snippet:
Possible to embed a youtube video in an svg?
my jquery code is like this,
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);
}
Basically, this code uses several of my pre-built functions (addSvgElementFromJson), to add elements to an svg root that is already present on the canvas. I’m just using a dummy link to see if the frame will show up. At runtime when I call the function, no errors are present, and the svg section is updated correctly, but nothing is displayed.
Here is the svg updated with the iframe and a couple of other objects:
<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>
I seem to have gotten the iframe to embed properly, but nothing is displayed on my svg canvas. Any help would be appreciated.
Update: By moving the foreignobject element inside of the initial group, I can get it to be drawn, but is empty. The iframe is still not being displayed. Also, by creating a dummy page with an embedded iframe, I am able to see the iframe contents:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Frameset//EN">
<html>
<body>
<iframe src="test.svg" width="600" height="600"></iframe>
</body>
</html>
And the test.svg contains:
<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>
I ended up just floating a div around my page with the toolbar that I wanted. Didn’t need to draw anything on the svg for the toolbar. Works much better with the floating div.
Update – For those looking to achieve my original goal, one must use jQuery to append an SVG namespaced Foreign Object node to base SVG.