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

注意：您需要为<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模式图像填充居中？

1 个答案: