css - 缩放未知大小的 SVG

Question

我想在固定大小的 block 内显示 svg 图像。我想在 block 内显示不失真且尽可能大的图像。我的问题是图像是由用户提供的，所以我不知道它的尺寸。有什么方法可以仅使用 CSS 来做到这一点吗？

Answer 1

不，你不能只使用 CSS 来做到这一点。告诉浏览器如何缩放 SVG 以填充其父容器的属性在 SVG 本身中定义。有四个属性特别控制缩放:

1. 宽度
2. 高度
3. viewBox
4. preserveAspectRatio

前两个可以用 CSS 覆盖，但后两个不能。如果您无法控制 SVG，则无法保证它具有 viewBox 或 preserveAspectRatio。

但是，您可以使用 Javascript 操作 viewBox 和 preserveAspectRatio 属性。