如何仅使用 css 调整 svg 内容的大小？

Question

如何调整内联 svg 矢量艺术作品的大小，仅使用 CSS，以便所有艺术作品调整大小并完全适合其较小的定义宽度和高度？应保留原始纵横比。在这种情况下，我希望将艺术品内容调整为 100x100px 框作为图标。下面的代码片段不起作用，因为它似乎只是裁剪 window 而不是调整内部内容的大小...什么 CSS 代码为 SVG 做了什么？

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>

如何仅使用 css 调整 svg 内容的大小？

How to resize svg contents using only css?

css

svg

resize