SVG foreignObject not showing on any browser, why?

Question

I have a foreignObject in an SVG element. All other elements show, but the foreignObject is invisible along with its content. Tested in Chrome, Firefox and Edge, all with the same result.

Here is the code:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="v-2" width="100%" height="100%">
    <g id="v-3" class="joint-viewport" transform="matrix(1,0,0,1,-1597.0002028000001,95.99995439999998)">
        ...
        <g id="j_29" model-id="e8dbd7a4-5d3d-44e5-85a0-09413112a39b" class="joint-theme-default joint-cell joint-type-html joint-type-html-element joint-element" data-type="html.Element" fill="#ffffff" stroke="none" transform="translate(1898.0001898,268.0000346)">
            <g class="rotatable" id="v-206">
                <rect class="body" id="v-207" stroke="none" fill-opacity="0" fill="#ffffff" width="100" height="60"></rect>
                <text class="label" id="v-208" font-size="14" y="0.8em" display="none" xml:space="preserve" fill="#000000" text-anchor="middle" font-family="Arial, helvetica, sans-serif" transform="matrix(1,0,0,1,125,20)">
                    <tspan id="v-209" class="v-line v-empty-line" dy="0em" x="0" style="fill-opacity: 0; stroke-opacity: 0;">-</tspan>
                </text>
                <foreignObject requiredExtensions="http://www.w3.org/1999/xhtml" width="100%" height="100">
                    <body xmlns="http://www.w3.org/1999/xhtml">
                        <input xmlns="http://www.w3.org/1999/xhtml" type="text" value="I'm HTML input">
                    </body>
                </foreignObject>
            </g>
        </g>
    </g>
    <defs id="v-4"></defs>
</svg>

Q: What am I doing wrong?

UPDATE: I noticed a few things:

adding xmlns="http://www.w3.org/1999/xhtml" to the input makes it show on Edge. On other browsers, it is still invisible.
On Chrome if I edit the outer <g> element by selecting "Edit as HTML", but then make no changes and get out of the editing mode, the input shows up.
adding requiredExtensions="http://www.w3.org/1999/xhtml" to the foreignObject tag and/or the body tag makes no difference.

I must be missing something...

How are you creating this? Looks like it's in the html namespace rather than the SVG namespace. BTW please don't post pictures of code, post code as text. — Robert Longson, Aug 05 '17 at 06:28
@RobertLongson Hi, thanks for the reply. I updated the post with the code. It has move g blocks but they are all similar, so I stripped them out and left just the problematic one. — Edy Bourne, Aug 05 '17 at 13:23
If I remove the transform attributes (so the foreignObject is on the screen) it displays OK for me. — Robert Longson, Aug 05 '17 at 13:49
The transform was actually to pan tglhat element into tge viewpoirt, but when i created the diagram with the element in the viewport and removed the tranforn, i get the same results... everything else shows, but the foreignobject is invisible... :/ — Edy Bourne, Aug 06 '17 at 18:05
As I said in my first comment, I imagine it's a bug with the code that creates the diagram. Till you provide that we won't make any progress here. — Robert Longson, Aug 06 '17 at 19:39
@RobertLongson I ended up finding the issue, but thanks for looking into it anyways! — Edy Bourne, Aug 14 '17 at 21:34

Vladimir Tolstikov · Accepted Answer · 2019-03-07T10:14:49.593

31

2019 year answer:

foreignObject should have x, y, width and height defined
add xmlns:xhtml="http://www.w3.org/1999/xhtml" to your <svg ... tag definition
all your HTML tags inside SVG should start with xhtml: prefix

Example:

<svg class="front" viewBox="0 0 376 244" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xhtml="http://www.w3.org/1999/xhtml">
...
    <foreignObject x="0" y="165" width="100%" height="38">
      <xhtml:span class="copy-popover">Click to Copy</xhtml:span>
    </foreignObject>
...
</svg>

edited Mar 07 '19 at 10:14

answered Mar 05 '19 at 14:05

Vladimir Tolstikov

2,463
21
14

3

hero! saved me after quite a bit of digging. – fungus1487 Mar 10 '19 at 20:56
However, css style will need to be inline. – Alan Dong Sep 23 '22 at 22:59
@AlanDong dunno, my stuff is working without inlining in most browsers – Vladimir Tolstikov Sep 25 '22 at 14:07

score 2 · Answer 2 · answered Aug 14 '17 at 21:33

The trick is to remove requiredExtensions="http://www.w3.org/1999/xhtml from the foreignObject tag. Chrome does not show any content when this attribute is present, but when it is removed it works on Chrome, IE and Firefox.

Unfortunately I hit another bug on Chrome (where it renders the input's content in a strange place when the text overflows), so I won't use foreignObjects anymore for this, but just in case anyone is curios, that is how I worked the initial issue around.

SVG foreignObject not showing on any browser, why?

2 Answers2

Linked