javascript - css - 如何使 svgs 响应？

Question

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

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

更新:我已经更新了 fiddle 。在 jsfiddle 的默认大小的 resule 中，重叠是可见的。我希望它能够响应。

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

Answer 1

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

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

并且在 svg 文件中你应该添加如下属性

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

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