将图像放在SVG填充前面

Question

我有一个SVG元素dining-table。我想在dining-table前面显示图像。

• 我需要将image元素保留在dining-table元素中，因为dining-table元素被包装在for循环中。
据我所知，
• z-index不适用于SVG元素。
• 我不希望为填充颜色添加不透明度。

.dining-table rect {
  width: 50px;
  height: 50px;
  fill: white;
  stroke: #0A7A74;
  stroke-width: 2px;
}

<svg width="500px" height="500px">
  <g class="dining-table">
    <image xlink:href="http://kommis.net/wp-content/uploads/2018/07/410147-200.png" x="0" y="0" height="50px" width="50px"/>
      <rect>
      </rect> 
   </g>
</svg>

这是JSfiddle链接：https://jsfiddle.net/ye0atc3p/7/