svg多个未知宽度的g组合自动挨着排列不重叠

SVG（Scalable Vector Graphics）是一种矢量图形格式，它允许你在HTML5中创建可缩放的图形，而不会丢失清晰度。当你需要在SVG中排列多个`<g>`元素（群组），每个元素的宽度不确定时，可以利用SVG的灵活性来实现自动布局。

为了实现这种效果，通常会使用CSS来控制`<g>`元素的位置和间距。首先，你需要给每个`<g>`元素设置一个唯一的ID，然后通过CSS的`display: inline-block`属性将其转换为行内块级元素，这样它们就会水平排列。同时，你可以设置`margin`属性来控制它们之间的间隔，如果不需要重叠，可以将`margin-right`设为负值以抵消前一个元素的宽度。

例如：

<g id="group1" style="display: inline-block; margin-right: -10px;">...</g>
<g id="group2">...</g>
<g id="group3">...</g>

CSS部分：

#group1, #group2, #group3 {
  display: inline-block;
}