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

Question

我有以下 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_imgjpg可能会随时间变化，加载不同的图片，所以我无法提前知道它的大小，但我知道，大多数时候，它的高度值大于它的宽度，但我需要将它应用于高度小于其自身宽度的矩形元素，这是肯定的（尽管我为该元素使用了相对 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>

注意：您需要 为 <image> 设置与图案图像容器 区域相同的 height 和 width 值（= 表示要应用图案的元素的大小，在本例中为 <rect>）。

最后我要说的是至少有几个原因让我希望图像在一个模式中保持应用：

一个是，通过这种方式，我可以使用javascript代码通过y和x属性来移动图像的居中值，同时让矩形保持在其位置；
另一个原因是，如果需要，我可以轻松地将矩形填充更改为纯色。

Answer 1

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

您搜索的属性是preserveAspectRatio="xMidYMid slice"。见 spec.

<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>

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

Is it possible to center a SVG pattern image fill without using JavaScript?

svg

css-position