Text inside SVG foreignobject is not visible

I created SVG with a foreignobject containing html.

But the html is not visible.

What could be the reason?

<svg
   width="160mm"
   height="297mm"
   viewBox="0 0 160 297"
   version="1.1"
   id="svg8"
   inkscape:version="0.92.3 (2405546, 2018-03-11)"
   sodipodi:docname="aligned.svg">
  <defs
     id="defs2" />
  <g
     inkscape:label="Ebene 1"
     inkscape:groupmode="layer"
     id="layer1">
    <rect
       style="opacity:1;fill:#00ff09;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.26499999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="rect10"
       width="30.994047"
       height="27.214285"
       x="9.8273811"
       y="89.491081" />
    <rect
       style="opacity:1;fill:#00ff09;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.26499999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="rect12"
       width="9.8273811"
       height="76.351196"
       x="57.452377"
       y="64.922623" />
    <ellipse
       style="opacity:1;fill:#00ff09;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.26499999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="path14"
       cx="114.52679"
       cy="103.09822"
       rx="17.008928"
       ry="19.276785" />
    <rect
       style="opacity:1;fill:#378a3a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.26499999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="rect35"
       width="170.08928"
       height="8.3154764"
       x="3.4017856"
       y="98.940483" />
  </g>
     <foreignObject width="100" height="50" requiredExtensions="http://www.w3.org/1999/xhtml">
     
      <div x="50" y="100" width="300" height="300" xmlns="http://www.w3.org/1999/xhtml">
        I want to see this text.
 ##############################
        #####################
      </div>
    </foreignObject>
</svg>

I took this source: https://wiki.selfhtml.org/wiki/SVG/Elemente/eingebundene_Inhalte/foreignObject There "requiredExtensions" gets used.

Solution

Your viewBox="0 80 160 297" is clipping the <foreignObject> out, because it lays implicitly at x="0" y="0".

You have x="50" y="100" on <div> what does nothing.

Either move x/y to foreignObject or change viewBox, this fixes display in Firefox.

For Chrome it seems to be necessary to omit the requiredExtensions attribute of foreignObject (honestly, I have no clue why nor what is it for).

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="160mm"
   viewBox="0 80 160 297"
   version="1.1"
   id="svg8"
>
  <defs
     id="defs2" />
  <g
     id="layer1">
    <rect
       style="fill:#00ff09"
       id="rect10"
       width="30.994047"
       height="27.214285"
       x="9.8273811"
       y="89.491081" />
    <rect
       style="fill:#00ff09"
       id="rect12"
       width="9.8273811"
       height="76.351196"
       x="57.452377"
       y="64.922623" />
    <ellipse
       style="fill:#00ff09"
       id="path14"
       cx="114.52679"
       cy="103.09822"
       rx="17.008928"
       ry="19.276785" />
    <rect
       style="fill:#378a3a"
       id="rect35"
       width="170.08928"
       height="8.3154764"
       x="3.4017856"
       y="98.940483" />
  </g>
     <foreignObject x="50" y="100" width="100" height="50">
      <div width="300" height="300" xmlns="http://www.w3.org/1999/xhtml">
        I want to see this text.
 ##############################
        #####################
      </div>
    </foreignObject>
</svg>