1

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.

3
  • 1
    Seems visible to me with Firefox. Commented Nov 15, 2019 at 22:09
  • @RobertLongson I don't see it in firefox.
    – guettli
    Commented Nov 21, 2019 at 9:17
  • It really was visible in Firefox at a time, because it had viewBox starting at 0 0 back then: stackoverflow.com/revisions/58881441/1
    – myf
    Commented Nov 21, 2019 at 10:11

3 Answers 3

2
+50

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>

1
  • Thank you very much for "omit requiredExtensions". This helped me. And sorry for clipping the question.
    – guettli
    Commented Nov 21, 2019 at 10:42
1

It works after removing that requiredExtensions guy, which I have no idea what it is.

<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">
     
      <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>

0

For me, as a bare minimum, I need to qualify any HTML tags with the XHTML namespace

<foreignObject x="0px" y="0px" width="500px" height="500px">
  <xhtml:div>
    I want to see this text.
    ##############################
    #####################
  </xhtml:div> 
</foreignObject>
1
  • The question is really about foreignObject in HTML. For foreignObject in XML we have this Q&A Commented Feb 13, 2023 at 10:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.