如何设置SVG RECT元素的背景图片100%覆盖且不重复平铺

我打算在服务端渲染网页时动态定义SVG形状的背景，生成完整页面后发送给浏览器。具体流程为随机选择一个SVG，再随机选取一组图片填充SVG的不同区块，固定需要9张填充图。
由于需要支持用户上传SVG，因此只有解析SVG文件才能获取其尺寸。SVG可以以内联形式嵌入站点HTML，我原本以为可以通过CSS定义内部SVG形状的属性，但尝试了多种CSS方案后都未生效。

我当前使用Pattern（图案）方案，再通过style=fill引用它。但每个场景下的图片尺寸、SVG rect的尺寸和位置都不相同，我无法定义宽度100%的pattern来完全填充形状。

目前实现的基础示例代码如下：

<svg>
    <defs>
      <pattern id="pattern1" patternUnits="userSpaceOnUse" width="300" height="200">
       <image x="0" y="0"  width="900" height="600" href="https://media.freestocktextures.com/cache/fb/eb/fbeb11ab97712b303983cd3e22ae8f3a.jpg" />
      </pattern>
    </defs>
    <rect id="block1" x="50" y="50" fill="#cccccc" 
          style="fill:url(#pattern1);" width="100" height="200"/>
  </svg>

我理想的方案是使用内联CSS，通过ID选择器设置background-size:cover，让图片在矩形内自适应缩放。但我用pattern fill实现不了该效果，百分比宽度不生效。

内容的提问来源于stack exchange，提问作者Elijha