html - SVG Rendering problem - Firefox cuts off the sibling SVG elements - is there a workaround?

Question

<div>
  <svg id="svg_viewport"
width="800" height="800"
style="background-color: pink"
>
 <svg id="o_1"
   x="10" y="10" width="200" height="200"
   >
   <image href="https://www.1kfa.com/table/img/image.png"
     height="200" width="200"></image>
 </svg>
 <svg id="o_2"
   x="0" y="100" width="100" height="100"
   >
   <rect id="r_2"
     width="100" height="100"
     fill="green"
     ></rect>
 </svg>
  </svg>
</div>
 

Answer 1

I think I've found a workaround.

By adding a viewBox, Firefox decides to render it properly. See line 8:

<div>
  <svg id="svg_viewport"
    width="800" height="800"
    style="background-color: pink"
    >
     <svg id="o_1"
       x="10" y="10" width="200" height="200"
       viewBox="0 0 200 200"
       >
       <image href="https://www.1kfa.com/table/img/image.png"
         height="200" width="200"></image>
     </svg>
     <svg id="o_2"
       x="0" y="100" width="100" height="100"
       >
       <rect id="r_2"
         width="100" height="100"
         fill="green"
         ></rect>
     </svg>
  </svg>
</div>