css - 将 SVG 缩放到它的 viewBox 或更小

Question

我有一个内联 <SVG>定义它是 viewBox但不是 height或 width .我曾经设置width/height与 viewBox 相同的值在创建 SVG 时；好处是最终图像被缩放到我想要的 SVG 自然单位；问题是固定的 width/height可能会在最后一页溢出父容器。删除 width/height来自 <SVG>导致图像呈现为父容器允许的最大大小，这几乎总是大于 SVG 的自然单位。

有没有办法缩放 <SVG>到它的自然单位，但如果父容器太小，则按比例缩小(!)？

Answer 1

如果您不使用内联 svg(并且不使用 IE 缩放...)，<img> 中的 svg是你的 friend 。

When an SVG file has a viewBox, and it is embedded within an <img>, browsers will (nearly always) scale the image to match the aspect ratio defined in the viewBox.

HTML

<figure>
  <figcaption><code>img</code>, auto size</figcaption>
  <div>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/potofgold.svg">
  </div>
</figure>

Result

内联 SVG 缩放支持远没有... Read from this amazing article to learn more about how this works有关广泛支持的解决方案，请参见第 4 点。它建议使用 padding-bottom hack，这在 iframe 嵌入中也很常见。