html - 将图像置于 SVG 填充之前

Question

我有一个 SVG 元素， dining-table. 我想在dining-table.

• 我需要将图像元素留在元素中，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/

标签： htmlcsssvg