css - 我如何使 svgs 响应？

Question

我通过 api 调用获取 svg 数据并将其附加到 DOM 中的 div。我正在获取 13-14 个 svg 元素并将其附加到单个 div。我想连续显示所有这些 svg。如果我将width: 5.5%; 分配给 svg 元素，则所有 svg 都会连续显示。但是当我调整窗口大小或监视器大小很小时，所有的 svgs 相互重叠。我在 jsfiddle 中创建了一个示例。 Please find this fiddle

我尝试在 svg 中使用 preserveAspectRatio 和 viewBox，但它不起作用。

更新：我更新了小提琴。在 jsfiddle 的默认大小的 resule 中，重叠是可见的。我希望它具有响应性。

如何使这些 svg 具有响应性，使其不会相互重叠？

Answer 1

为了这些目的最好使用img标签：

<img src="path_to_svg" style="width: 5.5%" />

在 svg 文件中你应该添加属性，例如

<svg width="100%" height="100%"> .... </svg>

在这种情况下，图像将根据需要调整大小。