相当于SVG的“背景大小：填充” <image> 元件

Question

我遇到的情况是，我有一个SVG图形，其宽度是视口的百分比，高度是固定的。 在图形内部，我有一个SVG image元素 ，我想始终填充其直接容器而不变形，这与使用CSS background-size: fill可以实现的效果非常相似。

如何使用SVG实现此目标？

这是问题的最小设置（ 和codepen ）：

 <svg width=100% height=300> <rect width=100% height=300 stroke="blue" stroke-width=30 fill="transparent" /> <image xlink:href="//unsplash.it/500/300" width=100% height=100% /> </svg> 

在以上代码段中，无论视口宽度如何，我都需要图像填充整个容器而不会变形（在这种情况下，该容器为根SVG）。

我无法切换到常规HTML，因为我正在处理的图形已将SVG剪贴蒙版应用于image元素。

我发现了这个问题，似乎与我要问的问题很接近，但是我认为我的问题没有答案：

如何使我的嵌入式svg图像填充以填充容器？

为了避免XY问题 ，这是我正在使用的实际SVG图形 。 我想要达到的（高度固定，宽度可变）结果：

Answer 1

SVG缩放与图像

如果将视图框添加到svg，则svg知道如何缩放。
现在添加与svg相同的viewBox比率，因此svg始终具有与图像相同的比例。
您始终可以将图像缩放到其在viewBox内部。
然后它将始终随svg缩放。

 svg { border: 2px solid black; } 

 <svg width="100%" height="100%" viewBox="0 0 500 300"> <image width="500" height="300" xlink:href="//unsplash.it/500/300"/> </svg> 

Answer 2

要保持图像的高度不变，请设置视口高度的固定值，然后将saveAspectRatio preserveAspectRatio = "none"

 <svg width="100%" height="300" viewBox="0 0 500 300" preserveAspectRatio = "none"> <image width="500" height="300" xlink:href="//unsplash.it/500/300"/> </svg> 

UPD

图片的比例将保持不变，使用preserveAspectRatio="xMinYMin slice"时，高度将保持固定

 <svg width="100%" height="300" viewBox="0 0 500 300" preserveAspectRatio="xMinYMin slice"> <image width="100%" height="300" xlink:href="//unsplash.it/500/300" /> </svg> 

UPD2

我看着你的Codepen喜欢这个主意。 经您许可，我已完成。 修改了一些参数

 <svg width="100%" height="400" preserveAspectRatio="xMinYMin slice"> <defs> <mask id="clipping"> <rect width="100%" height="400" fill="white"/> <ellipse cx="50%" cy="120%" rx="75%" ry="37%"/> </mask> <linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="blue"/> </linearGradient> </defs> <rect width="100%" height="400" fill="orange" mask="url(#clipping)" transform="translate(-20 12) rotate(-2.5)" /> <image xlink:href="https://unsplash.it/1000/500" width="100%" height="400" mask="url(#clipping)" transform="translate(0 -10)" /> <rect width="100%" height="400" fill="url(#Gradient1)" mask="url(#clipping)" transform="translate(0 -10)" opacity="0.25" /> </svg> 

Answer 3

我最终使用了两个SVG和一个图像，该图像使用了第一个SVG中定义的剪切蒙版将其剪切。 我只能通过定义一个视图框而不是宽度和高度来使SVG缩放。 我选择使用固定的宽高比，而不是按照最初计划的固定高度和百分比宽度。

 body > * { position: absolute; top: 0; left: 0; width: 100%; } img { clip-path: url(#clipper); } 

 <svg viewBox="0 0 1000 500"> <defs> <symbol id="arch" viewBox="0 0 1000 400"> <path d="M0 0 H 1000 V 400 Q 500 300, 0 400" /> </symbol> <clipPath id="clipper" clipPathUnits="objectBoundingBox"> <path d="M0 0 H 1 V 1 Q .5 .75, 0 1" /> </clipPath> <linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="#87AFBF"/> <stop offset="100%" stop-color="#002855"/> </linearGradient> </defs> <use href="#arch" width="100%" y="-40" fill="#F9B000" transform="translate(-20 12) rotate(-2.5)" /> </svg> <img src="//unsplash.it/1000/400" alt=""> <svg viewBox="0 0 1000 500"> <use href="#arch" y="-50" fill="url(#Gradient1)" opacity="0.75" /> </svg> 

CodePen