如何仅使用 CSS 按比例缩放 SVG 内容大小？

Question

如何仅使用 CSS缩放或调整内联 SVG 矢量艺术品的大小，以便所有艺术品按比例调整大小并完全适合其定义的宽度和高度？

应尊重原始纵横比。

在这种情况下，我希望将图稿内容调整为 100x100px 框作为图标。下面的代码片段不起作用，因为它似乎只是裁剪窗口而不是调整内部内容的大小。

svg {
  width:  100px;
  height: 100px;
  fill:   blue;
  background-color: red;
}

<svg>
    <polygon points="100,0 30,200 200,70 0,70 170,200"/>
</svg>

<svg >
    <polygon points="0,0 200,140 110,200"/>
</svg>

<svg>
    <ellipse cx="200" cy="70" rx="200" ry="40" />
</svg>

我得到了这个：（看起来更像是农作物）

但我想得到这个：（按比例缩放到盒子的边缘）

Answer 1

添加 viewBox 以保持宽高比并设置 100% 高度和宽度以填充 svg 容器。

svg{
  width:100px;
  height:100px;
  background-color: red;
}
svg * {
  width:  100%;
  height: 100%;
  fill:   blue;
}

<svg viewbox="0 0 200 200">
  <polygon points="100,0 30,200 200,70 0,70 170,200"/>
</svg>

<svg viewbox="0 0 200 200">
  <polygon points="0,0 200,140 110,200"/>
</svg>

<svg viewbox="0 0 400 70">
  <ellipse cx="200" cy="70" rx="200" ry="40" />
</svg>