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，只需将SVG的width设置为100%，将height设置为<path> 711px（<image>）的高度。这样，SVG视口就会填充页面的宽度，并将其高度保持在我们想要的大小。

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

最后一步是将<image>应用于图像，使其具有我们想要的形状。要使剪辑路径自动适应clipPathUnits="objectBoundingBox"，我们需要使用transform。

objetBoundingBox单位的东西是（0,0）表示它应用的元素的左上角，（1,1）对应于它应用的元素的右下角。但是我们的道路比那要大得多。它的宽度和高度为1366x711。

要解决这个问题，我们需要缩放路径，使其大小仅为1x1，而不是1366x711。因此，我们应用1/1366并在X中按1/711进行缩放，在Y中按transform="transform="scale(0.000732, 0.001406)"进行缩放。

body {
  margin: 0;
  padding: 0;
}

最终结果如下：

＆＃13;

<svg width="100%" height="711px" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="clip" clipPathUnits="objectBoundingBox">
      <path d="M0,0V622.58S250,711,683,711s683-88.42,683-88.42V0Z"
            transform="scale(0.000732, 0.001406)"></path>
    </clipPath>
  </defs>
  <image xlink:href='https://i.imgur.com/4AiXzf8.jpg' width="100%" height="100%" preserveAspectRatio="xMinYMin slice"
         clip-path="url(#clip)"></image>
</svg>

＆＃13;

b2b_b2c_acc recipe

＆＃13;

Answer 2

移除高度并保留AspectRatio，但保持viewBox原样，宽度为100%。

如何将svg缩放到视口，但在填充图像上保持宽高比

2 个答案: