ForeignObject在Firefox中不显示，但在Chrome和Edge中显示

Question

我正在尝试修复我的程序的渲染错误，该程序目前在Chrome和Edge中完美工作。Firefox根本不呈现foreignObjects

我正在使用SVG.js库，它为我的一个foreignobject生成下面的代码。我已经尝试了一个修复从早期的问题，这是使用下面的css代码没有效果。

<foreignObject width="256" height="66" x="76" y="1113">
<span id="run" xmlns="http://www.w3.org/1999/xhtml">
<button type="button" id="runButton" class="userButtons" style="width:133px;height:65px">RUN</button>
</span>
</foreignObject>

svg {
overflow: visible;
}

如果有人有任何建议，我将非常感激。

Answer 1

很可能，您的svg没有明确的高度。
尝试添加viewBox和height/width属性:

svg{
overflow: visible;
border:1px solid red;
}
.scroll{
height:900px;
overflow:auto;
}

<div class="scroll">
<svg viewBox="0 0 256 66" width="256px" height="66">
<foreignObject width="256" height="66" x="76" y="500">
<span id="run" xmlns="http://www.w3.org/1999/xhtml">
<button type="button" id="runButton" class="userButtons" style="width:133px;height:65px">RUN</button>
</span>
</foreignObject>
</svg>
</div>