SVG foreignObject 没有在任何浏览器上显示，为什么？

Question

我在 SVG 元素中有一个 foreignObject。显示所有其他元素，但 foreignObject 及其内容不可见。在 Chrome、Firefox 和 Edge 中测试，结果相同。

代码如下：

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

问：我做错了什么？

更新：我注意到一些事情：

向输入添加 xmlns="http://www.w3.org/1999/xhtml" 使其显示在 Edge 上。在其他浏览器上，它仍然是不可见的。
在 Chrome 上，如果我通过选择 "Edit as HTML" 编辑外部 <g> 元素，但随后不做任何更改并退出编辑模式，输入会显示。
将 requiredExtensions="http://www.w3.org/1999/xhtml" 添加到 foreignObject 标签 and/or body 标签没有区别。

我一定是漏掉了什么...

Answer 1

诀窍是从 foreignObject 标签中删除 requiredExtensions="http://www.w3.org/1999/xhtml。 Chrome 当此属性存在时不显示任何内容，但当它被删除时它适用于 Chrome、IE 和 Firefox。

不幸的是，我在 Chrome 上遇到了另一个错误（当文本溢出时，它将输入的内容呈现在一个奇怪的地方），所以我不会再为此使用 foreignObjects，但以防万一好奇，这就是我解决最初问题的方式。

Answer 2

2019年答案：

foreignObject 应该有 x、y、width 和 height 定义
将 xmlns:xhtml="http://www.w3.org/1999/xhtml" 添加到您的 <svg ... 标签定义中
SVG 中的所有 HTML 标签都应以 xhtml: 前缀开头

示例：

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

SVG foreignObject 没有在任何浏览器上显示，为什么？

SVG foreignObject not showing on any browser, why?

html

xhtml

svg