svg响应，带有背景尺寸的封面图像

Question

我的背景已经差不多用完了，但是它不能正常工作，我正在尝试使图像适合视图框的尺寸。我需要我的图像能够响应并表现为background-size：cover。我还需要使滚动条消失，而且我不知道为什么会出现滚动条。有人可以帮我让我的图像适合整个视区，并做出响应-我需要宽度为100％，高度为100％，并且图像必须覆盖

codepen

<svg viewBox="0 0 490 500" width="100%" height="100%">
  <defs>
    <pattern id="hexagons" width="100%" height="100%">
      <g id="svg" fill="black" x="0" y="0"></g>    
    </pattern>
    <mask id="hexagon-halftone-mask">  
     <rect x="0" y="0" width="100%" height="100%" fill="url(#hexagons)" />
   </mask>
  </defs>

  <image id="svg-bg"  xlink:href="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426_960_720.jpg" mask="url(#hexagon-halftone-mask)"/> 
</svg>