feImage中preserveAspectRatio不生效，如何实现background-size:cover效果？

你遗漏的核心点是preserveAspectRatio的取值及滤镜区域的尺寸配置：

• 默认的xMidyMid meet是保持图像比例并完整显示（不裁剪），只会缩放到刚好适配滤镜区域的一边，无法实现覆盖效果；
• 要对应background-size:cover的无变形覆盖，需改用xMidYMid slice——这个取值会让图像按比例缩放至完全填满滤镜区域，超出部分被裁剪，同时保持图像居中不变形。

此外还需确保以下配置正确，否则修改preserveAspectRatio也可能不生效：

• 给<filter>标签设置width="100%" height="100%"，让滤镜区域完全匹配目标元素的尺寸；
• 给<feImage>设置width="100%" height="100%"，强制图像填充整个滤镜区域；
• 若滤镜使用primitiveUnits="objectBoundingBox"（默认是userSpaceOnUse），需将feImage的width/height设为1（该模式下取值为元素尺寸的相对比例）。

代码示例 #

<svg width="0" height="0" viewBox="0 0 0 0">
  <filter id="imageCover" width="100%" height="100%">
    <feImage 
      xlink:href="your-image-url.jpg" 
      width="100%" 
      height="100%" 
      preserveAspectRatio="xMidYMid slice"
    />
  </filter>
</svg>

<!-- 应用滤镜的目标元素 -->
<div style="width: 400px; height: 300px; filter: url(#imageCover);"></div>

关键说明 #

• xMidYMid slice：xMid/YMid保证图像在滤镜区域居中，slice保证图像按比例缩放至覆盖整个区域，超出部分被裁剪，完全对应background-size:cover的行为；
• 显式设置filter和feImage的width/height为100%，可避免SVG滤镜默认尺寸（如默认filter的width为120%、height为120%）导致的计算偏差；
• 内联SVG设为width="0" height="0"，可避免占用页面额外空间。

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