iframe inside SVG did not loaded

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.

enter image description here

Solution

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.