CSS-如何使SVG响应？

Question

我通过api调用获取svg数据，并将其附加到DOM中的div中。 我要获取13-14个svg元素，并将其附加到单个div 。 我想连续显示所有这些svg。 如果我给出width: 5.5%; 对于svg元素，所有svg都显示在一行中。 但是，当我调整窗口大小或监视器大小很小时，所有svg彼此重叠。 我在jsfiddle中创建了一个示例。 请找到这个小提琴

我尝试在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>

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