Html 缩放svg以设置宽度（px）&；自动高度

我似乎不懂svg。我想要有人向我解释我哪里出了问题。因此，我有一个内联svg：

  <div style="width:1000px; height:auto; background-color:blue;">
    <svg class="_image"><use xlink:href="#myId" />
      <symbol id="myId" viewBox="0 0 1000 700">
        <ellipse cx="200" cy="80" rx="100" ry="50"
          style="fill:yellow;stroke:purple;stroke-width:2" />
      </symbol>  
    </svg>
  </div>

…所有东西都像小提琴一样放在一起：

svg设置为100%宽度。它有一个可视框

不，没有。只有您的

可以。没有

viewBox

您的SVG将无法缩放。如果在SVG中添加一个

viewBox

，一切都会正常工作

谢谢。我看过那个教程（还有很多其他教程），他们都告诉我我需要一个viewbox，然后它会适当地缩放。这似乎对我不起作用，所以我肯定错过了什么。这就是为什么我创建了这个最小的示例，其实并不多。如果你能说得更具体一点，那将非常感谢。你的svg是100%的宽度，即1000px。盒子里的椭圆不是。尝试放置一个svg图像。它将按预期扩展。然后你可以调试它。我不确定我是否理解。我不是在使用svg图像吗？我在我的站点中使用sprite，因此我有一个带有不同标签的大型svg，因此我可以在html中内联包含它们。将svg img放入img标签中，并尝试为该img类添加宽度。好的，谢谢，太好了。但是，我正在使用符号，因为我正在精灵文件中使用它。这意味着我不能给svg一个viewBox，因为它包含了我整个项目的所有图像。看看这里和这里。对这种情况有什么建议吗？取决于你所说的“精灵文件”是什么意思。如果您的意思是替换位图精灵文件，那么只需将SVG宽度和高度设置为与viewBox匹配即可。例如，

width=“1000”height=“700”viewBox=“0 1000 700”

。如果您的意思是“从另一个文件访问的符号集合”，则viewBox需要进入该另一个文件。无论如何都将忽略此文件中的文件。

._image  {
  width: 100%;
  height: auto;
}