Nested SVG image skips the render of next elements

Question

I am having issue with nested SVGs images.

The follow code display 3 things: a background and 2 items.

  <div>
    <svg viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image class="BACKGROUND" xlink:href="bg.png"
        height="775" width="1462" y="0" x="0"></image>
      <svg class="ITEM1" width="226" height="247" x="893" y="6">
        <image xlink:href="logo.png"
          height="247" width="226" y="0" x="0"></image>
      </svg>
      <svg class="ITEM2" width="616" height="70" x="106" y="27">
        <text y="0" x="0">Proposition commerciale</text>
      </svg>
    </svg>
  </div>

While ITEM1 (Renault logo) is visible, ITEM2 (the slide title) is hidden:

If I have N items after ITEM1, all of them would be hidden. If I place ITEM2 before ITEM1 on the DOM, ITEM2 is visible:

When I play with DevTool and changing an attribute of ITEM2, it appears until I move the cursor out.

Any idea what's going on? Is that a bug or am I doing something I should not?

question from:https://stackoverflow.com/questions/65939494/nested-svg-image-skips-the-render-of-next-elements

Answer 1

I found a trick: wrapping the <image> into a <g> with a translate(0,0).

 <svg class="ITEM1" width="226" height="247" x="893" y="6">
    <g transform="translate(0,0)">
      <image xlink:href="logo.png"
        height="247" width="226" y="0" x="0"></image>
    </g>
  </svg>

This bypass the issue on Firefox