css - 如何让svgs响应？

Question

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

我在svg中尝试使用preserveAspectRatio和viewBox，但它无效。

更新：我已经更新了小提琴。在jsfiddle中的默认大小为resule时，重叠是可见的。我希望它能够做出回应。

如何让这些svgs响应，使其不会相互重叠？

Answer 1

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

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

在svg文件中，您应该添加

等属性

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

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