iframe inside SVG did not loaded

Question

As far as I know, Adding HTML tag inside SVG is possible by using <foreignObject /> tag. I want to load a page by using iframe inner SVG but it din't work. Am I missing something ? or It just can't possible using HTML inner SVG ?

this is my code :

<svg xmlns="http://www.w3.org/2000/svg">
    <foreignObject x="0" y="0">
        <iframe src="content.html" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
    </foreignObject>
</svg>

I tried to load it directly from browsers, it shows nothing.

Answer 1

foreignObject elements require width and height attributes. They do not have width and height CSS styles, in fact all of the CSS you're supplying is inappropriate and ignored for a foreignObject element.

This should work (provided you're not using IE as that does not support foreignObject currently)

<link href="https://michaelsboost.com/TailwindCSSMod/tailwind-mod.min.css" rel="stylesheet"/>

<div class="absolute inset-0">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <foreignobject width="100%" height="100%">
      <iframe src="https://bing.com/" style="width: 100%; height: 100%; border: 0;"></iframe>
    </foreignobject>
  </svg>
</div>

Note that if you move your iframe outside where the foreignObject bounds are using position absolute as you are doing that may also cause problems for you.