title: Embedded iframe within SVG element
body: <p>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:</p>
  
  <p><a href="https://stackoverflow.com/questions/6134184/possible-to-embed-a-youtube-video-in-an-svg">Possible to embed a youtube video in an svg?</a></p>
  
  <p>my jquery code is like this, </p>
  
  <pre><code>    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);
      }
  </code></pre>
  
  <p>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.</p>
  
  <p>Here is the svg updated with the iframe and a couple of other objects:</p>
  
  <pre><code>    &lt;svg width="600" height="800" xmlns="http://www.w3.org/2000/svg"&gt;
       &lt;g&gt;
        &lt;title&gt;Layer 1&lt;/title&gt;
        &lt;g id="0ea5f198be28b719853b18c7390003e7"&gt;
           &lt;rect id="svg_1" width="350" height="50" fill="#ffffff" stroke="#22C" stroke-width="0.5" x="20" y="40"/&gt;
        &lt;/g&gt;
      &lt;/g&gt;
      &lt;foreignobject height="30" width="360" y="10" x="20"&gt;
        &lt;iframe xmlns="http://www.w3.org/1999/xhtml" src="http://www.google.com" height="30" width="360"/&gt;
      &lt;/foreignobject&gt;
     &lt;/svg&gt;
  </code></pre>
  
  <p>I seem to have gotten the iframe to embed properly, but nothing is displayed on my svg canvas. Any help would be appreciated.</p>
  
  <p>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:</p>
  
  <pre><code>    &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Frameset//EN"&gt;
       &lt;html&gt;
        &lt;body&gt;
         &lt;iframe src="test.svg" width="600" height="600"&gt;&lt;/iframe&gt;
        &lt;/body&gt;
       &lt;/html&gt;
  </code></pre>
  
  <p>And the test.svg contains:</p>
  
  <pre><code>    &lt;svg width="600" height="800" xmlns="http://www.w3.org/2000/svg"&gt;
       &lt;g&gt;
        &lt;title&gt;Layer 1&lt;/title&gt;
        &lt;g id="0ea5f198be28b719853b18c739002923" name="text_free"&gt;
         &lt;rect y="40" x="20" stroke-width="0.5" stroke="#22C" fill="#ffffff" height="50" width="350" name="border"/&gt;
         &lt;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"&gt;&lt;/text&gt;
       &lt;/g&gt;
      &lt;g id="0ea5f198be28b719853b18c7390003e7" name="text_free"&gt;
       &lt;rect y="90" x="20" stroke-width="0.5" stroke="#22C" fill="#ffffff" height="50" width="350" name="border"/&gt;
      &lt;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"&gt;&lt;/text&gt;
      &lt;/g&gt;
     &lt;foreignObject height="500" width="500" y="200" x="70"&gt;
      &lt;iframe xmlns="http://www.w3.org/1999/xhtml" src="http://www.google.com" height="500" width="500"/&gt;
     &lt;/foreignObject&gt;
   &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>