Estoy tratando de corregir un error de renderizado con mi programa, que actualmente funciona perfectamente en Chrome y Edge. Firefox no representa los objetos extranjeros en absoluto
Estoy usando la biblioteca SVG.js, que produce el siguiente código para uno de mis ForeignObjects. Probé una solución de una pregunta anterior, que consistía en usar el código css a continuación sin ningún efecto.
<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; }Si alguien tiene alguna idea le estaría muy agradecido.
Es muy probable que su svg no tenga una altura explícita.
Intente agregar un viewBox y propiedades de alto/ancho:
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>