Html 如何让SVG元素展开以填充容器的宽度，同时保持纵横比

我一直在尝试在不使用固定像素值的情况下缩放SVG以适应容器。从我在网上读到的内容来看，这应该是可能的，但我还没有设法让它发挥作用。下面显示了一些示例代码。关于如何让examplesvg svg元素填充svgcontainer div的宽度（仅通过使用HTML和CSS），有什么建议吗？提前谢谢

正文{
背景：rgb（17,17,17）；
}
.svgcontainer{
宽度：400px；
高度：300px；
背景：绿色；
位置：相对位置；
}
#示例SVG{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
}

---

@zenoArrow，请检查下面的工作片段，了解您所面临的已解决问题

让我解释一下，出了什么问题：

在div

svgcontainer

中为svg设置

width

和

height

。因此，如果未提及，它会将svg的宽度和高度设置为

viewBox=“0 300 100”

不要使用

preserveSpectratio=“xMidyMid”

而是使用

preserveSpectratio=“none”

按照父容器缩放/填充svg，如果不添加，它将水平缩放，但不会垂直缩放

---

viewBox=“0 0 303 103”

应等于

@zenoArrow，请检查下面的工作代码段以了解您面临的已解决问题

让我解释一下，出了什么问题：

在div
svgcontainer
中为svg设置
width
和
height
。因此，如果未提及，它会将svg的宽度和高度设置为
viewBox=“0 300 100”
不要使用
preserveSpectratio=“xMidyMid”
而是使用
preserveSpectratio=“none”
按照父容器缩放/填充svg，如果不添加，它将水平缩放，但不会垂直缩放
viewBox=“0 0 303 103”
应该等于
我认为您的CSS选择器是错误的。您不希望缩放符号
#示例svg
，而是希望缩放
.svgcontainer
中的
svg
元素。你在找这样的东西吗

其他需要注意的事项：


您不需要指定
preserveSpectratio=“xMidYMid”
；这相当于默认设置（有关详细信息，请参阅）
您有一个输入错误：
preserveSpectratio=“xMidyMid”
；y应该是大写的。SVG对此非常挑剔；你很幸运，因为这也是默认值。（你通过艰苦的方式学到的东西；）
它应该是
viewBox=“-1.5-1.5 303 103”
，因为SVG边框一半在图形内部绘制，一半在图形外部绘制


body{背景：灰色；}
.svgcontainer{
宽度：400px；
高度：300px；
背景：绿色；
位置：相对位置；
}
.svgcontainer>svg{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
}
我认为您的CSS选择器是错误的。您不希望缩放符号
#示例svg
，而是希望缩放
.svgcontainer
中的
svg
元素。你在找这样的东西吗

其他需要注意的事项：


您不需要指定
preserveSpectratio=“xMidYMid”
；这相当于默认设置（有关详细信息，请参阅）
您有一个输入错误：
preserveSpectratio=“xMidyMid”
；y应该是大写的。SVG对此非常挑剔；你很幸运，因为这也是默认值。（你通过艰苦的方式学到的东西；）
它应该是
viewBox=“-1.5-1.5 303 103”
，因为SVG边框一半在图形内部绘制，一半在图形外部绘制


body{背景：灰色；}
.svgcontainer{
宽度：400px；
高度：300px；
背景：绿色；
位置：相对位置；
}
.svgcontainer>svg{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
}

感谢Girish的回答，但是关于“不要使用preserveAspectRatio=“xMidyMid”而使用preserveAspectRatio=“none”按照父容器缩放/填充svg，如果不添加，它将水平缩放，但不会垂直缩放。”这不是我要寻找的行为。我只想填充水平宽度，而不是垂直宽度。我共享的代码是一个简化的示例，可以让大家理解这一点，但最终我将使用的SVG是一个网站的徽标。除此之外，我将查看您的代码，看看是否可以获得我想要的行为。好的，然后忽略
preserveSpectratio
部分，如果我的答案很好，可以接受：）再次感谢您的帮助。感谢您的帮助，我对您的答案投了更高的票。感谢您的回答，但是关于“不要使用preserveSpectratio=“xMidyMid”，而是使用preserveSpectratio=“none”按照父容器缩放/填充svg，如果不添加，它将水平缩放，而不是垂直缩放。”这不是我要寻找的行为。我只想填充水平宽度，而不是垂直宽度。我共享的代码是一个简化的示例，可以让大家理解这一点，但最终我将使用的SVG是一个网站的徽标。除此之外，我将查看您的代码，看看是否可以获得我想要的行为。好的，然后忽略
preserveSpectratio
部分，如果我的答案很好，可以接受：）再次感谢您的帮助。感谢你的帮助，我对你的回答投了赞成票。我已经看过了，但无论如何还是要感谢你。我想知道为什么有人在这个问题上给我打分。你在假设我已经为此付出了多少努力。为了说明这一点，我在过去几周里一直在为这个问题苦苦挣扎，上面的问题是我问的第一个问题。我