缩放 svg 以设置宽度（px）和自动高度答案

【问题标题】：Scaling svg to set width (px) & auto height缩放 svg 以设置宽度（px）和自动高度
【发布时间】：2017-11-25 13:34:14
【问题描述】：

我似乎不明白 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>

div 的宽度设置为 1000px。 svg 设置为 100% 宽度。它有一个视图框。我现在希望 svg 在宽度上缩放 100%，这意味着宽度为 1000px，然后相应地调整高度，因为它对于 div 和 svg 本身都设置为自动。我期待这一点，因为我提供了一个视图框。我哪里错了？

这是css：

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

...把所有东西放在一起就像小提琴一样：https://jsfiddle.net/hv6ejn98/2/

【问题讨论】：

css-tricks.com/scale-svg
谢谢。我看过那个教程（以及许多其他教程），他们都告诉我我需要一个视图框，然后它会适当地缩放。不过，这似乎对我不起作用，所以我一定遗漏了一些东西。这就是我创建这个最小示例的原因，它真的不多。因此，如果您能更具体一点，将不胜感激。
您的 svg 宽度为 100%，即 1000 像素。你的情况下的椭圆不是。尝试放置一个 svg 图像。它将按预期扩展。然后您可以调试它。
我不确定我是否理解。我没有使用 svg 图像吗？我在我的网站中使用精灵，所以我有一个很大的 svg，不同的 <symbol>s 有不同的标签，所以我可以将它们内联包含在我的 html 中。
将您的 svg img 放入一个 img 标签中，并尝试为该 img 类添加宽度。

标签： html css svg graphics

【解决方案1】：

svg 设置为 100% 宽度。它有一个 viewBox。

不，它没有。只有您的<symbol> 可以。如果没有viewBox，您的 SVG 将无法扩展。如果您在 SVG 中添加 viewBox，一切都会如您所愿。

<div style="width:1000px; height:auto; background-color:blue;">
    <svg class="_image" viewBox="0 0 1000 700"><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>

【讨论】：

好的，谢谢，太好了。但是，我正在使用该符号，因为我在 sprite 文件中使用它。这意味着我不能给 svg 一个 viewBox - 因为它包含我整个项目的所有图像。请参阅此处css-tricks.com/svg-sprites-use-better-icon-fonts 和此处css-tricks.com/svg-symbol-good-choice-icons。对这种情况有什么建议吗？
取决于“精灵文件”的含义。如果您的意思是替换位图精灵文件，那么只需设置您的 SVG 宽度和高度以匹配 viewBox。 IE。 width="1000" height="700" viewBox="0 0 1000 700"。相反，如果您的意思是“从另一个文件访问的符号集合”，那么 viewBox 需要进入另一个文件。无论如何，此文件中的那个将被忽略。