是否可以在不使用JavaScript的情况下将SVG模式图像填充居中？

我有以下几点：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="480" height="1080" version="1.1" viewBox="0 0 480 1080" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink">

     <defs>
  <pattern id="wpi" width="100%" height="100%" patternUnits="userSpaceOnUse">
   <image width="100%" height="100%" preserveAspectRatio="none" xlink:href="h_img.jpg" x="0" y="0"/>
  </pattern>
 </defs>
 <rect class="wallpaper" width="100%" height="250" fill="url(#wpi)"/>
</svg>

h_img jpg可能会随时间变化，加载不同的图像，因此我无法预先知道它的大小，但我知道，大多数情况下，它的高度值大于其宽度，但我需要将其应用于一个与自身宽度相比高度更小的rect元素，这是肯定的（尽管我使用的是相对100%的值）。我需要图案用图像填充矩形，保持其纵横比和裁剪高度（或隐藏溢出）居中。我知道我可以使用JavaScript计算图像的相对宽度，相应地调整高度以保持纵横比，并计算提供居中所需的偏移量（我做到了）但是……你知道吗？也许有一种方法可以简单地在SVG元素上使用正确的参数而不使用JavaScript来完成我所需要的工作？

我试过：

<pattern id="wpi" width="100%" height="100%" patternContentUnits="objectBoundingBox">
  <image width="1" height="1" preserveAspectRatio="xMidYMid" xlink:href="h_img.jpg" x="0" y="0"/>
</pattern>

但这并没有得到我想要的效果。。。 谢谢你的帮助

已解决编辑：

多亏@ccprog的建议让我走上了正确的方向，我终于找到了这样一种解决方法：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="480" height="1080" viewBox="0 0 480 1080" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <defs>
  <pattern id="wpi" width="1" height="1">
   <image width="100%" height="250" preserveAspectRatio="xMidYMid slice" xlink:href="h_img.jpg"/>
  </pattern>
 </defs>
 <rect class="wallpaper" width="100%" height="250" fill="url(#wpi)"/>
</svg>

注意：您需要为

设置与模式图像容器区域使用的

高度
和
宽度
值相同的
值（=这意味着要应用模式的元素的大小，在本例中为
）

作为最后一句话，我要说的是，我希望图像保持在一个模式中，至少有几个原因：


一个是，通过这种方式，我可以使用javascript代码通过
y
和
x
属性值移动图像的中心，同时让矩形保持在其位置

另一个原因是，如果需要，我可以很容易地将矩形填充更改为纯色

如果要在矩形区域中显示一次图像，则不需要图案。图案用于多次重复内容

您正在搜索的属性是
preserveAspectRatio=“xmidymidSlice”
。请参阅


谢谢你的帮助，你的建议让我走上了正确的方向，解决了一半的问题，所以我不仅会投票，而且会接受你的答案。再次感谢你，对耽搁表示歉意……另外，我还用我从你的建议和我投票的原因得出的最终解决方案编辑了我的问题您的解决方案是否在居中的同时“重复”该模式？我正在寻找一种方法。我的意思是，我的图案比我的容器小。我希望它在中间，在两边重复。这是在一个有响应的容器上，所以调整需要是动态的，即使在容器调整大小时也要保持其居中。使用JS是可行的，但我只想使用SVG。
<svg width="480" height="1080" viewBox="0 0 480 1080"
     xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">
   <image class="wallpaper" width="100%" height="250"
          preserveAspectRatio="xMidYMid slice" xlink:href="h_img.jpg"/>
</svg>