如何将 svg 缩放到视口，但保持填充图像的纵横比

Question

我想用 svg 填充视口，并向该 svg 中的路径添加填充。

当我设置preserveAspectRatio="xMinYMin slice"为图像模式时，它将很好地保留其纵横比，但路径不会缩放。

如果我然后添加preserveAspectRatio="none"到 svg 元素，整个元素将适合视口，但我的图像将无法正确缩放。

我在忽略什么？

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 750" preserveAspectRatio="none">
    <defs>
      <pattern id='home' width="1" height="1" preserveAspectRatio="xMinYMin slice">
        <image xlink:href='https://i.imgur.com/4AiXzf8.jpg' width="100%" height="100%" preserveAspectRatio="xMinYMin slice"></image>
      </pattern>
    </defs>
    <path id="bg" class="cls-1" d="M0,0V622.58S250,711,683,711s683-88.42,683-88.42V0Z"style="fill: url(#home)"></path>
  </svg>

Answer 1

如果将整个 SVG 设置为preserveAspectRatio="none"，则 SVG 内的所有内容都会拉伸，并且无法抵消这种情况。所以你必须用不同的方式来做。

我们要做的就是删除viewBox和preserveAspectRatio并将widthSVG 的100%和设置为我们的( )height的高度。这样，SVG 视口就会填充页面的宽度，并将其高度保持在我们想要的大小。<path>711px

下一步是将 移出<image>，并设置<pattern>其宽度和高度。所以它现在可以缩放以填充我们的宽 SVG，并保持其纵横比。100% x 100%preserveAspectRatio="xMinYMin slice"

最后一步是将 a 应用于<clipPath>图像以赋予其我们想要的形状。为了让剪辑路径自动适应<image>，我们需要使用clipPathUnits="objectBoundingBox".

objetBoundingBox 单位的特点是 (0,0) 代表它所应用到的元素的左上角，(1,1) 对应于它所应用到的元素的右下角。但我们的道路远不止于此。它的宽度和高度为 1366x711。

为了解决这个问题，我们需要缩放路径，使其大小仅为 1x1，而不是 1366x711。所以我们应用 a并在 X 和Y 中transform缩放它。1/13661/711

transform="transform="scale(0.000732, 0.001406)"

最终结果是这样的：

transform="transform="scale(0.000732, 0.001406)"

body {
  margin: 0;
  padding: 0;
}