Html 相当于；背景尺寸：填充“；对于SVG<；图像>；要素

我有一个SVG图形，它的宽度是视口的百分比，高度是固定的。在图形内部，我有一个我希望始终填充其直接容器而不失真的图标，这与使用CSS

background size:fill

可以实现的效果非常相似

如何使用SVG实现这一点

下面是问题（）的最小设置：

Svg与图像缩放 如果向svg添加一个视图框，svg知道如何进行缩放。
现在添加与svg相同的viewBox比率，使svg始终具有与图像相同的比例。
您始终可以将图像缩放到其在viewBox中的位置。
然后它将始终使用svg进行缩放

svg{
边框：2件纯黑；
}

---

要保持图像高度不变，请设置视口高度的固定值，并

保留Aspectratio=“无”

---

我最终使用了两个SVG和一个图像，该图像使用了在第一个SVG中定义的剪切遮罩对其进行剪切。我能够通过只定义一个视图框而不是宽度和高度来缩放SVGs。我选择了使用固定的纵横比，而不是像我最初计划的那样使用固定的高度、百分比宽度

正文>*{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
}
img{
剪辑路径：url（#clipper）；
}

这很好，但我需要能够约束SVG的高度，这意味着SVG将具有可变的纵横比，因此我无法将其编码到viewbox中。这也很有趣，但图像失真了。当然是这样，要么保留纵横比，要么扭曲图像。选择你想要的。@NathanArthur又增加了一个选项。图片没有失真，高度是fixed@RobertLongson也许我把这整件事都搞错了（关于我想实现的目标，请参见问题的结尾），但我要特别问的是，

background image:fill

的行为是否可以在SVG中实现。意思是——图像没有失真，其容器也没有保留其纵横比。@Alexandr\u谢谢！我必须仔细阅读

preserveAspectRatio

属性。看起来非常有用。你的决定非常可靠，没有我的缺点（+）